useScrollLock@astryxdesign/core v0.5.2 · useScrollLock

Install with shadcn

Experimental compatibility. This installs the real Astryx package and creates a local public re-export; it does not copy component implementation source. How compatibility works.

bash
npx shadcn@latest add https://astryx.atmeta.com/r/astryx-component-use-scroll-lock.json

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
import {useScrollLock} from '@astryxdesign/core/hooks'

Best practices

GuidancePractices
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

ParamTypeDescription
isLockedrequired
boolean

whether body scroll should be locked.