Usage
Locks body scroll when active by pinning the body with position: fixed. This prevents background scrolling behind modals and dialogs, which is necessary for iOS Safari where overscroll-behavior: contain does not work. Restores the original scroll position when unlocked. Pinning hides the document scrollbar, so where that scrollbar takes layout space (desktop) the hook holds its gutter open with scrollbar-gutter: stable for the duration of the lock. The page, including any position: fixed chrome, does not shift sideways.
ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Use when opening full-screen modals or dialogs to prevent background content from scrolling. |
| Do | Pass the same boolean that controls dialog visibility (e.g., isOpen) as the isLocked parameter. |
| Don't | Use for non-modal overlays like popovers or tooltips; users should be able to scroll away from those. |
Parameters
| Param | Type | Description |
|---|---|---|
isLockedrequired | boolean | whether body scroll should be locked. |