Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProLock page scrolling while a modal, drawer or menu is open, without the layout shifting when the scrollbar disappears, and safe for nested locks.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for a custom overlay you build yourself: a lightbox, a full-screen menu or a drawer. It counts locks, so two overlays open at once release the page only when both close.
Do not use it with Dialog, Sheet or Drawer from this library; they already lock scroll.
import { useScrollLock } from "@/hooks/use-scroll-lock"useScrollLock(open)useScrollLock(locked: boolean, options?): void
| Option | Type | Default | Description |
|---|---|---|---|
reserveScrollbar | boolean | true | Add padding the width of the removed scrollbar. |
While any lock is active the document element gets overflow: hidden (and the padding). The original inline values are restored when the last lock is released or its component unmounts.
A hook has no markup. A modal that locks scroll must also trap focus, set aria-modal, close on Escape and return focus on close; this hook only handles scrolling.
The hook ships with renderHook tests (use-scroll-lock.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.