[useScrollLock] Avoid scrollbar layout shift issues

docs/app/experiments/scroll-lock.tsx

@@ -0,0 +1,66 @@
+'use client';
+import * as React from 'react';
+import { useScrollLock } from '../../../packages/mui-base/src/utils/useScrollLock';
+
+export default function ScrollLock() {
+  const [enabled, setEnabled] = React.useState(false);
+  const [bodyScrollY, setBodyScrollY] = React.useState(false);
+  const [longContent, setLongContent] = React.useState(true);
+
+  useScrollLock(enabled);
+
+  React.useEffect(() => {
+    document.body.style.overflowY = bodyScrollY ? 'scroll' : '';
+  }, [bodyScrollY]);
+
+  return (
+    <div>
+      <h1>useScrollLock</h1>
+      <p>On macOS, enable `Show scroll bars: Always` in `Appearance` Settings.</p>
+      <div
+        style={{
+          position: 'fixed',
+          top: 15,
+          display: 'flex',
+          gap: 10,
+          background: 'white',
+          padding: 20,
+        }}
+      >
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              checked={enabled}
+              onChange={(e) => setEnabled(e.target.checked)}
+            />
+            Scroll lock
+          </label>
+        </div>
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              checked={bodyScrollY}
+              onChange={(e) => setBodyScrollY(e.target.checked)}
+            />
+            body `overflow`
+          </label>
+        </div>
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              checked={longContent}
+              onChange={(e) => setLongContent(e.target.checked)}
+            />
+            Long content
+          </label>
+        </div>
+      </div>
+      {[...Array(longContent ? 100 : 10)].map((_, i) => (
+        <p key={i}>Scroll locking text content</p>
+      ))}
+    </div>
+  );
+}

packages/mui-base/src/utils/useScrollLock.ts

@@ -1,75 +1,127 @@
-import { useEnhancedEffect } from './useEnhancedEffect';
-import { useId } from './useId';
 import { isIOS } from './detectBrowser';
+import { useEnhancedEffect } from './useEnhancedEffect';
+
+let originalHtmlStyles = {};
+let originalBodyStyles = {};
+let preventScrollCount = 0;
+let restore: () => void = () => {};
+
+function preventScrollIOS() {
+  // To implement
+  return () => {};
+}
+
+function preventScrollStandard() {
+  const html = document.documentElement;
+  const body = document.body;
+  const htmlStyle = html.style;
+  const bodyStyle = body.style;
+
+  let resizeRaf: number;
+  let scrollX: number;
+  let scrollY: number;
+
+  function lockScroll() {
+    const htmlComputedStyles = getComputedStyle(html);
+    const bodyComputedStyles = getComputedStyle(body);
+    const hasConstantOverflowY =
+      htmlComputedStyles.overflowY === 'scroll' || bodyComputedStyles.overflowY === 'scroll';
+    const hasConstantOverflowX =
+      htmlComputedStyles.overflowX === 'scroll' || bodyComputedStyles.overflowX === 'scroll';
+
+    scrollX = htmlStyle.left ? parseFloat(htmlStyle.left) : window.scrollX;
+    scrollY = htmlStyle.top ? parseFloat(htmlStyle.top) : window.scrollY;
+
+    originalHtmlStyles = {
+      position: htmlStyle.position,
+      top: htmlStyle.top,
+      left: htmlStyle.left,
+      right: htmlStyle.right,
+      overflowX: htmlStyle.overflowX,
+      overflowY: htmlStyle.overflowY,
+    };
+    originalBodyStyles = {
+      overflowX: bodyStyle.overflowX,
+      overflowY: bodyStyle.overflowY,
+    };
+
+    const isScrollableY = html.scrollHeight > html.clientHeight;
+    const isScrollableX = html.scrollWidth > html.clientWidth;
+
+    // Handle `scrollbar-gutter` in Chrome when there is no scrollable content.
+    const hasScrollbarGutterStable = htmlComputedStyles.scrollbarGutter?.includes('stable');
+
+    if (!hasScrollbarGutterStable) {
+      Object.assign(htmlStyle, {
+        position: 'fixed',
+        top: `${-scrollY}px`,
+        left: `${-scrollX}px`,
+        right: '0',
+      });
+    }
 
-const activeLocks = new Set<string>();
+    Object.assign(htmlStyle, {
+      overflowY:
+        !hasScrollbarGutterStable && (isScrollableY || hasConstantOverflowY) ? 'scroll' : 'hidden',
+      overflowX:
+        !hasScrollbarGutterStable && (isScrollableX || hasConstantOverflowX) ? 'scroll' : 'hidden',
+    });
+
+    // Ensure two scrollbars can't appear since `<html>` now has a forced scrollbar, but the
+    // `<body>` may have one too.
+    if (isScrollableY || hasConstantOverflowY) {
+      bodyStyle.overflowY = 'hidden';
+    }
+    if (isScrollableX || hasConstantOverflowX) {
+      bodyStyle.overflowX = 'hidden';
+    }
+  }
+
+  function cleanup() {
+    Object.assign(htmlStyle, originalHtmlStyles);
+    Object.assign(bodyStyle, originalBodyStyles);
+
+    if (window.scrollTo.toString().includes('[native code]')) {
+      window.scrollTo(scrollX, scrollY);
+    }
+  }
+
+  function handleResize() {
+    cleanup();
+    cancelAnimationFrame(resizeRaf);
+    resizeRaf = requestAnimationFrame(lockScroll);
+  }
+
+  lockScroll();
+  window.addEventListener('resize', handleResize);
+
+  return () => {
+    cleanup();
+    window.removeEventListener('resize', handleResize);
+  };
+}
 
 /**
  * Locks the scroll of the document when enabled.
  *
  * @param enabled - Whether to enable the scroll lock.
  */
 export function useScrollLock(enabled: boolean = true) {
-  // Based on Floating UI's FloatingOverlay
-
-  const lockId = useId();
   useEnhancedEffect(() => {
     if (!enabled) {
       return undefined;
     }
 
-    activeLocks.add(lockId!);
-
-    const rootStyle = document.documentElement.style;
-    // RTL <body> scrollbar
-    const scrollbarX =
-      Math.round(document.documentElement.getBoundingClientRect().left) +
-      document.documentElement.scrollLeft;
-    const paddingProp = scrollbarX ? 'paddingLeft' : 'paddingRight';
-    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-    const scrollX = rootStyle.left ? parseFloat(rootStyle.left) : window.scrollX;
-    const scrollY = rootStyle.top ? parseFloat(rootStyle.top) : window.scrollY;
-
-    rootStyle.overflow = 'hidden';
-
-    if (scrollbarWidth) {
-      rootStyle[paddingProp] = `${scrollbarWidth}px`;
-    }
-
-    // Only iOS doesn't respect `overflow: hidden` on document.body, and this
-    // technique has fewer side effects.
-    if (isIOS()) {
-      // iOS 12 does not support `visualViewport`.
-      const offsetLeft = window.visualViewport?.offsetLeft || 0;
-      const offsetTop = window.visualViewport?.offsetTop || 0;
-
-      Object.assign(rootStyle, {
-        position: 'fixed',
-        top: `${-(scrollY - Math.floor(offsetTop))}px`,
-        left: `${-(scrollX - Math.floor(offsetLeft))}px`,
-        right: '0',
-      });
+    preventScrollCount += 1;
+    if (preventScrollCount === 1) {
+      restore = isIOS() ? preventScrollIOS() : preventScrollStandard();
     }
 
     return () => {
-      activeLocks.delete(lockId!);
-
-      if (activeLocks.size === 0) {
-        Object.assign(rootStyle, {
-          overflow: '',
-          [paddingProp]: '',
-        });
-
-        if (isIOS()) {
-          Object.assign(rootStyle, {
-            position: '',
-            top: '',
-            left: '',
-            right: '',
-          });
-          window.scrollTo(scrollX, scrollY);
-        }
+      preventScrollCount -= 1;
+      if (preventScrollCount === 0) {
+        restore();
       }
     };
-  }, [lockId, enabled]);
+  }, [enabled]);
 }