Handle dual scrollbars

mui · Sep 16, 2024 · bbf5374 · bbf5374
1 parent bc8ecc9
commit bbf5374
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/docs/app/experiments/scroll-lock.tsx b/docs/app/experiments/scroll-lock.tsx
@@ -11,7 +11,7 @@ export default function ScrollLock() {
   useScrollLock(enabled);
 
   React.useEffect(() => {
-    document.body.style.overflowY = bodyScrollY ? 'auto' : '';
+    document.body.style.overflowY = bodyScrollY ? 'scroll' : '';
   }, [bodyScrollY]);
 
   return (
@@ -59,8 +59,8 @@ export default function ScrollLock() {
           </label>
         </div>
       </div>
-      {[...Array(longContent ? 100 : 10)].map(() => (
-        <p>Scroll locking text content</p>
+      {[...Array(longContent ? 100 : 10)].map((_, i) => (
+        <p key={i}>Scroll locking text content</p>
       ))}
     </div>
   );

diff --git a/packages/mui-base/src/utils/useScrollLock.ts b/packages/mui-base/src/utils/useScrollLock.ts
@@ -1,8 +1,8 @@
 import { isIOS } from './detectBrowser';
 import { useEnhancedEffect } from './useEnhancedEffect';
 
-let originalStyles = {};
-
+let originalRootStyles = {};
+let originalBodyStyles = {};
 let preventScrollCount = 0;
 let restore: () => void = () => {};
 
@@ -13,7 +13,9 @@ function preventScrollIOS() {
 
 function preventScrollStandard() {
   const html = document.documentElement;
+  const body = document.body;
   const rootStyle = html.style;
+  const bodyStyle = body.style;
 
   let resizeRaf: number;
   let scrollX: number;
@@ -28,14 +30,17 @@ function preventScrollStandard() {
     scrollX = rootStyle.left ? parseFloat(rootStyle.left) : window.scrollX;
     scrollY = rootStyle.top ? parseFloat(rootStyle.top) : window.scrollY;
 
-    originalStyles = {
+    originalRootStyles = {
       position: rootStyle.position,
       top: rootStyle.top,
       left: rootStyle.left,
       right: rootStyle.right,
       overflowX: rootStyle.overflowX,
       overflowY: rootStyle.overflowY,
     };
+    originalBodyStyles = {
+      overflow: bodyStyle.overflow,
+    };
 
     Object.assign(rootStyle, {
       // Handle `scrollbar-gutter` in Chrome when there is no scrollable content.
@@ -48,11 +53,16 @@ function preventScrollStandard() {
       overflowX: html.scrollWidth > html.clientWidth || hasConstantOverflowX ? 'scroll' : 'hidden',
     });
 
+    // Ensure two scrollbars can't appear since `<html>` now has a forced scrollbar, but the
+    // `<body>` may have one too.
+    bodyStyle.overflow = 'hidden';
+
     return undefined;
   }
 
   function cleanup() {
-    Object.assign(rootStyle, originalStyles);
+    Object.assign(rootStyle, originalRootStyles);
+    Object.assign(bodyStyle, originalBodyStyles);
 
     if (window.scrollTo.toString().includes('[native code]')) {
       window.scrollTo(scrollX, scrollY);