[docs] Fix persistent scrolling/navigation issues

elastic · Nov 17, 2023 · ef5b92e · ef5b92e
1 parent 0c199e9
commit ef5b92e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 14 deletions.
diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -32,6 +32,14 @@ export class GuidePageChrome extends Component {
     this.setState({
       isSideNavOpenOnMobile: !this.state.isSideNavOpenOnMobile,
     });
+    // Scroll the mobile nav to the currently open page
+    setTimeout(() => {
+      const sideNav = document.querySelector('.euiSideNav__content');
+      const selectedNavItem = sideNav?.querySelector(
+        '.euiSideNavItemButton-isSelected'
+      ).parentElement;
+      sideNav.scrollTop = selectedNavItem.offsetTop - sideNav.offsetHeight;
+    }, 200);
   };
 
   onSearchChange = (event) => {
@@ -71,14 +79,27 @@ export class GuidePageChrome extends Component {
     // then scroll the selected nav section into view
     setTimeout(() => {
       const sideNav = document.querySelector('.guideSideNav__content');
-      const isMobile = sideNav?.querySelector('.euiSideNav__mobileToggle');
 
-      const selectedButton = sideNav?.querySelector(
+      const selectedNavItem = sideNav?.querySelector(
         '.euiSideNavItemButton-isSelected'
       );
-      selectedButton?.parentElement.scrollIntoView({
-        block: isMobile ? 'start' : 'center',
-      });
+      if (selectedNavItem) {
+        const selectedNavGroup = selectedNavItem.parentElement;
+
+        // Wait a bit for react to blow away and re-create the DOM
+        // then scroll the selected nav section into view
+        setTimeout(() => {
+          // Center the open/selected item on the nav
+          const scrollOffset =
+            selectedNavGroup.offsetTop -
+            sideNav.offsetHeight / 2 +
+            selectedNavGroup.offsetHeight / 2;
+
+          // Don't use `scrollIntoView` or scroll APIs - they cause side effects
+          // on body scrolling for some annoying reason
+          sideNav.scrollTop = scrollOffset;
+        }, 1); // Note: Webkit browsers require this timeout duration, FF doesn't
+      }
     });
   };
 

diff --git a/src-docs/src/services/routing/scroll_to_hash.ts b/src-docs/src/services/routing/scroll_to_hash.ts
@@ -15,13 +15,6 @@ export const useScrollToHash = () => {
       document.removeEventListener('readystatechange', readyStateListener);
   }, []);
 
-  // Scroll back to top of page when going to a completely separate page
-  useEffect(() => {
-    // For some annoying reason, the docs side nav using scrollIntoView() causes
-    // the window to scroll as well, so we need to wrap this in a timeout to supersede it
-    setTimeout(() => window.scrollTo(0, 0), 1);
-  }, [location.pathname]);
-
   useEffect(() => {
     if (documentReadyState !== 'complete') return; // Wait for page to finish loading before scrolling
 
@@ -30,7 +23,7 @@ export const useScrollToHash = () => {
 
     if (element) {
       // Wait a beat for layout to settle (especially when navigating to a hash of a new page)
-      requestAnimationFrame(() => {
+      setTimeout(() => {
         // Focus element for keyboard and screen reader users
         if (!isTabbable(element)) {
           element.tabIndex = -1;
@@ -46,7 +39,7 @@ export const useScrollToHash = () => {
           top: element.offsetTop - HEADER_OFFSET,
           behavior: 'smooth',
         });
-      });
+      }, 1);
     } else {
       // Scroll back to top of page
       window.scrollTo({