useScrollLock@xds/core · hooks

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.

Best practices

GuidancePractices
DoUse when opening full-screen modals or dialogs to prevent background content from scrolling.
DoPass the same boolean that controls dialog visibility (e.g., isOpen) as the isLocked parameter.
Don'tUse for non-modal overlays like popovers or tooltips — users should be able to scroll away from those.

Parameters

ParamTypeDescription
isLockedrequired
booleanWhether body scroll should be locked.

Import

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