UI ComponentsUtilities
Scroll Lock
Lock document scrolling while preserving existing body styles.
Import
import { ScrollLock } from "@puzzle-ui/ui";Conditional locking
Mount ScrollLock while an overlay is active, or toggle enabled. This example locks both the body and document-element scrolling in the preview iframe, not the surrounding docs page or independently scrollable elements. The control remains available to unlock it.
API
| Prop | Type | Default | Description |
|---|---|---|---|
enabled | boolean | true | Lock the document containing the component. |
ScrollLock renders a hidden marker, not a content wrapper. Multiple locks are coordinated per document; scrolling is restored only after the final lock releases. Existing inline styles and scroll position are preserved, with scrollbar compensation and iOS handling. It does not trap focus or create modal semantics; Dialog and modal Backdrop already include it.