useScrollLock

v0.0.14testeddemo

Lock scrolling of an element by toggling overflow: hidden, preserving the element's prior inline overflow and handling iOS touchmove. Returns a writable boolean ref — set it to lock/unlock, read it for state.

Source Tests

Example

const el = useTemplateRef<HTMLElement>('el');
const isLocked = useScrollLock(el);
isLocked.value = true; // lock
isLocked.value = false; // unlock

Demo

Loading demo…

Signature

export function useScrollLock(
  element: MaybeComputedElementRef,
  initialState = false,
  options: UseScrollLockOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`element`	`MaybeComputedElementRef`	—	The element (or template ref / getter) to lock.
`initialState`?	`boolean`	`false`	Whether the element starts locked. Defaults to `false`.
`options`?	`UseScrollLockOptions`	`{}`	Configurable `window` / `navigator` (mainly for SSR & testing).

Returns

UseScrollLockReturnA writable boolean ref; true while locked.