ScrollLocker

Primitive #52

🔍 Problem it solves

When a modal opens, background page should not scroll. But simply setting `overflow: hidden` on `` causes the page to shift because the scrollbar disappears. This layout shift is jarring.

✅ Solution

lockBodyScroll() locks body scroll when overlay opens. It calculates scrollbar width, adds padding to the body to prevent layout shift. Returns a cleanup function to restore original overflow and padding when closed.

🧩 Used by components

Dialog, Modal, Drawer, Sheet, Popover, Sidebar

🎮 Interactive demo

📖 How to test:

Click "Open modal" – notice that the background page does not scroll and there is no layout shift (the content does not jump).
Press "Escape" or click the close button to unlock scrolling.

Scrollable content – keep scrolling down
More content
Even more
You can also test with different screen sizes