Shadcn.io is not affiliated with official shadcn/ui
React useScrollLock Hook
React useScrollLock hook for preventing body scroll. Modal/overlay scrolling, width reflow prevention. SSR safe.
React useScrollLock Hook preview
Lock page scrolling when modals or overlays are open. useScrollLock returns isLocked state plus lock/unlock functions for manual control. Automatically compensates for scrollbar width to prevent layout shift when scroll is disabled. Targets document.body by default or any element via selector/ref. Auto-locks on mount with cleanup on unmount. Preserves original overflow and padding-right styles for proper restoration. Works with any scrollable container. Essential for modals, drawers, mobile menus, lightboxes, or any fullscreen overlay. SSR safe with server checks. Works with Next.js App Router.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this hook for you — no copy-paste, no CLI:
use shadcnio to install the use-scroll-lock hook into my projectRelated Components
React useBoolean Hook
Boolean state with helpers
React useToggle Hook
Toggle between values
React useOnClickOutside Hook
Detect outside clicks
React useEventListener Hook
Declarative DOM events
React useMediaQuery Hook
Responsive breakpoints
React useWindowSize Hook
Track window dimensions
FAQ
Was this page helpful?
Sign in to leave feedback.