improve scroll lock

sumup-oss · Dec 19, 2024 · f55271a · f55271a
1 parent b13d78d
commit f55271a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/packages/circuit-ui/components/Modal/Modal.stories.tsx b/packages/circuit-ui/components/Modal/Modal.stories.tsx
@@ -32,7 +32,6 @@ export default {
   component: Modal,
   tags: ['status:stable'],
   parameters: {
-    layout: 'padded',
     chromatic: {
       modes: {
         mobile: modes.smallMobile,

diff --git a/packages/circuit-ui/hooks/useScrollLock/useScrollLock.ts b/packages/circuit-ui/hooks/useScrollLock/useScrollLock.ts
@@ -43,18 +43,20 @@ export const useScrollLock = (isLocked: boolean): void => {
       const scrollY =
         document.documentElement.style.getPropertyValue('--scroll-y');
       const { body } = document;
+      const bodyWidth = body.offsetWidth;
+      // when position is set to fixed, the body element is taken out of
+      // the normal document flow and this may cause it to change size.
+      // To prevent this, we set the width of the body to its current width.
       body.style.position = 'fixed';
-      body.style.left = '0';
-      body.style.right = '0';
+      body.style.width = `${bodyWidth}px`;
       body.style.top = `-${scrollY}`;
     } else {
       // restore scroll to page
       const { body } = document;
       const scrollY = body.style.top;
       body.style.position = '';
       body.style.top = '';
-      body.style.left = '';
-      body.style.right = '';
+      body.style.width = '';
       window.scrollTo(0, Number.parseInt(scrollY || '0', 10) * -1);
     }
   }, [isLocked]);