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 |
Usage
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). |