docs: fix left-hand sidebar scrolling issue (#33796)

Author: kay-kim

doc/user/assets/sass/_layout.scss

@@ -139,6 +139,7 @@ table.inline-headings {
         z-index: 100;
         top: var(--nav-height);
         left: 0;
+        height: calc(100vh - var(--nav-height));
         border-right: 1px solid var(--divider-light);
         transform: translateX(-100%);
         transition: all .2s ease-out;
@@ -167,10 +168,11 @@ table.inline-headings {
     top: var(--nav-height);
     padding: var(--xx-small) var(--small);
     overflow-y: auto;
-    height: 100vh;
+    height: calc(100vh - var(--nav-height));
     display: flex;
     font-size: rem(1.3);
     overflow-x: hidden;
+    overscroll-behavior: contain;
 
     &,
     ul {
@@ -190,6 +192,7 @@ table.inline-headings {
 
     @media(max-width: 850px) {
         padding-bottom: var(--large);
+        height: calc(100vh - var(--nav-height));
     }
 
     a {

doc/user/layouts/_default/baseof.html

@@ -197,6 +197,58 @@
         closeSidebar();
       });
 
+      // Prevent body scroll when scrolling in sidebar
+      const sidebar = document.querySelector(".sidebar");
+      let isScrollingSidebar = false;
+
+      sidebar.addEventListener("wheel", (e) => {
+        const sidebarElement = e.currentTarget;
+        const { scrollTop, scrollHeight, clientHeight } = sidebarElement;
+
+        // Check if we're at the top or bottom of the sidebar
+        const isAtTop = scrollTop === 0;
+        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1; // Small tolerance for rounding
+
+        // If scrolling up and at top, or scrolling down and at bottom, prevent default
+        if ((e.deltaY < 0 && isAtTop) || (e.deltaY > 0 && isAtBottom)) {
+          e.preventDefault();
+        }
+      }, { passive: false });
+
+      // Also handle touch events for mobile
+      sidebar.addEventListener("touchstart", () => {
+        isScrollingSidebar = true;
+      });
+
+      sidebar.addEventListener("touchend", () => {
+        isScrollingSidebar = false;
+      });
+
+      // Prevent body scroll when actively scrolling sidebar
+      document.addEventListener("wheel", (e) => {
+        if (isScrollingSidebar) {
+          e.preventDefault();
+        }
+      }, { passive: false });
+
+      // Ensure sidebar content is properly scrollable when expanded
+      const ensureSidebarScrollability = () => {
+        const sidebar = document.querySelector(".sidebar");
+        if (sidebar) {
+          // Force a reflow to ensure proper height calculation
+          sidebar.style.height = 'auto';
+          sidebar.offsetHeight; // Trigger reflow
+          sidebar.style.height = '';
+        }
+      };
+
+      // Run on menu expansion
+      document.addEventListener('click', (e) => {
+        if (e.target.closest('.sidebar a') && e.target.closest('li').classList.contains('has-children')) {
+          setTimeout(ensureSidebarScrollability, 100);
+        }
+      });
+
       backdrop.addEventListener("click", () => {
         closeSidebar();
       });