mui · atomiks · Sep 17, 2024 · Sep 12, 2024 · Sep 12, 2024 · Sep 12, 2024
@@ -0,0 +1,57 @@
+'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 ? 'auto' : '';
+  }, [bodyScrollY]);
+
+  return (
+    <div>
+      <h2>Enable Show scroll bar: Always</h2>
+      <div style={{ display: 'flex', gap: 10 }}>
+        <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(() => (
+        <p>Scroll locking text content</p>
+      ))}
+    </div>
+  );
+}
@@ -1,75 +1,104 @@
 import { useEnhancedEffect } from './useEnhancedEffect';
 import { useId } from './useId';
-import { isIOS } from './detectBrowser';
 
 const activeLocks = new Set<string>();
+let originalStyles = {};
+let originalBodyOverflow = '';
 
 /**
  * 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) {
+    if (!enabled || !lockId) {
       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 html = document.documentElement;
+    const rootStyle = html.style;
+    const bodyStyle = document.body.style;
     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';
+    let resizeRaf: number;
+    let scrollX: number;
+    let scrollY: number;
 
-    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`.
+    function lockScroll() {
       const offsetLeft = window.visualViewport?.offsetLeft || 0;
       const offsetTop = window.visualViewport?.offsetTop || 0;
+      scrollX = rootStyle.left ? parseFloat(rootStyle.left) : window.scrollX;
+      scrollY = rootStyle.top ? parseFloat(rootStyle.top) : window.scrollY;
+
+      activeLocks.add(lockId!);
+
+      // We don't need to lock the scroll if there's already an active lock. However, it's possible
+      // that the one that originally locked it doesn't get cleaned up last. In that case, one of the
+      // newer locks needs to perform the style and scroll restoration.
+      if (activeLocks.size > 1) {
+        return cleanup;
+      }
+
+      originalStyles = {
+        position: rootStyle.position,
+        top: rootStyle.top,
+        left: rootStyle.left,
+        right: rootStyle.right,
+        ...(scrollbarWidth && {
+          overflowX: rootStyle.overflowX,
+          overflowY: rootStyle.overflowY,
+        }),
+      };
+      originalBodyOverflow = bodyStyle.overflow;
+
+      bodyStyle.overflow = 'hidden';
 
       Object.assign(rootStyle, {
-        position: 'fixed',
+        position: html.scrollHeight > html.clientHeight ? 'fixed' : '',
         top: `${-(scrollY - Math.floor(offsetTop))}px`,
         left: `${-(scrollX - Math.floor(offsetLeft))}px`,
         right: '0',
+        ...(scrollbarWidth && {
+          overflowY: html.scrollHeight > html.clientHeight ? 'scroll' : 'hidden',
+          overflowX: html.scrollWidth > html.clientWidth ? 'scroll' : 'hidden',
+        }),
       });
+
+      return undefined;
     }
 
-    return () => {
-      activeLocks.delete(lockId!);
+    function cleanup() {
+      if (!lockId) {
+        return;
+      }
+
+      activeLocks.delete(lockId);
 
       if (activeLocks.size === 0) {
-        Object.assign(rootStyle, {
-          overflow: '',
-          [paddingProp]: '',
-        });
-
-        if (isIOS()) {
-          Object.assign(rootStyle, {
-            position: '',
-            top: '',
-            left: '',
-            right: '',
-          });
+        Object.assign(rootStyle, originalStyles);
+        bodyStyle.overflow = originalBodyOverflow;
+
+        if (window.scrollTo.toString().includes('[native code]')) {
           window.scrollTo(scrollX, scrollY);
         }
       }
+    }
+
+    const handleResize = () => {
+      cleanup();
+      cancelAnimationFrame(resizeRaf);
+      resizeRaf = requestAnimationFrame(lockScroll);
+    };
+
+    lockScroll();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      cleanup();
+      window.removeEventListener('resize', handleResize);
     };
   }, [lockId, enabled]);
 }