even better

mui · Apr 1, 2023 · d2a25a8 · d2a25a8
1 parent f9fbb37
commit d2a25a8
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
@@ -123,6 +123,7 @@ ProductIdentifier.propTypes = {
   versionSelector: PropTypes.element,
 };
 
+// To match scrollMarginBottom
 const browserUrlPreviewHeight = 30;
 
 function PersistScroll(props) {
@@ -142,7 +143,8 @@ function PersistScroll(props) {
     const activeBox = activeDrawerLink.getBoundingClientRect();
 
     if (activeBox.top < 0 || activeBox.bottom + browserUrlPreviewHeight > window.innerHeight) {
-      scrollContainer.scrollTop += activeBox.top - (activeBox.bottom - activeBox.top) * 1.5;
+      // Scroll the least possible from the initial render, e.g. server-side, scrollTop = 0.
+      activeDrawerLink.scrollIntoView(false);
     }
 
     return () => {

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
@@ -85,6 +85,8 @@ const Item = styled(
         paddingLeft: 2,
       }),
       '&.app-drawer-active': {
+        // To match browserUrlPreviewHeight
+        scrollMarginBottom: 30,
         color: (theme.vars || theme).palette.primary[600],
         backgroundColor: (theme.vars || theme).palette.primary[50],
         '&:hover': {