scroll-lock

Lock scrolling of a single element by toggling overflow: hidden.


Package	`@vizejs/composable/scroll-lock`
Own the source	`vize lib pull composable:scroll-lock`
Runtime exports	`useScrollLock`
Gzip budget	2048 B

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { useScrollLock } from "@vizejs/composable/scroll-lock";

Runtime contract

Utility	Category	Stability	SSR	Hydration	Cleanup	Targets	Host globals	Uses
`useScrollLock`	dom	experimental	deterministic-fallback	stable	reactive-scope	web, desktop	—	`resolveElement`, `tryOnScopeDispose`

API

`useScrollLock`

Lock scrolling of a single element by toggling overflow: hidden. The element's previous inline overflow is restored on unlock, target change, and scope disposal. This is intentionally element-scoped: for the document viewport (nested lock stacking, scrollbar-gap compensation, scroll restoration) use createScrollLock from @vizejs/ui/scroll-lock. Server renders never touch styles and report the requested initial value.

function useScrollLock( target: MaybeElementTarget, options: UseScrollLockOptions = {}, ): WritableComputedRef<boolean>

Types

`UseScrollLockOptions`

Options for useScrollLock.

Member	Type	Description
`initialValue`?	`boolean`	Lock as soon as the element resolves.
`preventTouchMove`?	`boolean`	Also cancel `touchmove` on the element while locked (iOS Safari ignores `overflow: hidden` for touch scrolling).