Disconnect sidebar scroll behaviors (#5778)

src/components/Layout/SidebarNav/SidebarNav.tsx

@@ -30,8 +30,15 @@ export default function SidebarNav({
   }
 
   return (
-    <div className={cn('sticky top-0 lg:bottom-0 lg:h-screen flex flex-col')}>
+    <div
-      <div className="overflow-y-scroll no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark">
+      className={cn(
+        'sticky top-0 lg:bottom-0 lg:h-[calc(100vh-4rem)] flex flex-col'
+      )}>
+      <div
+        className="overflow-y-scroll no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark"
+        style={{
+          overscrollBehavior: 'contain',
+        }}>
         <aside
           className={cn(
             `lg:grow lg:flex flex-col w-full pb-8 lg:pb-0 lg:max-w-xs z-10 hidden lg:block`

src/components/Layout/Toc.tsx

@@ -19,7 +19,11 @@ export function Toc({headings}: {headings: Toc}) {
           On this page
         </h2>
       )}
-      <div className="h-full overflow-y-auto pl-4 max-h-[calc(100vh-7.5rem)]">
+      <div
+        className="h-full overflow-y-auto pl-4 max-h-[calc(100vh-7.5rem)]"
+        style={{
+          overscrollBehavior: 'contain',
+        }}>
         <ul className="space-y-2 pb-16">
           {headings.length > 0 &&
             headings.map((h, i) => {