Astryx Design System

useScrollLock@astryxdesign/core v0.0.15 · useScrollLock

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.

ts
import {useScrollLock} from '@astryxdesign/core/hooks'

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.