Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

useScrollLock

Lock page scrolling while a custom overlay is open.

HooksInteraction@gaudi/design-system/hooks/interaction/use-scroll-lockView in StorybookSource

Sets overflow hidden on the body while locked and pads it by the scrollbar width so content does not shift. Locks from several components nest; the last release restores the page.

Usage

import { useFocusTrap, useScrollLock } from '@gaudi/design-system/hooks';
useScrollLock(open);const trapRef = useFocusTrap({ active: open });

Examples

Full-screen menu

Storybook

API

1 option
1 return value

Accessibility

Lock scrolling together with a focus trap, so neither the pointer nor the keyboard reaches the page behind the overlay.

Notes

  • Dialog, Sheet and Drawer lock scrolling themselves.
  • lockScroll() returns a release function for non-React code.
DialogModal, confirmation and bare full-screen dialogs for editing, detail inspection, explicit decisions, lightboxes and launchers.12 examplesSheetA panel that slides in from an edge over a dimmed page, for side tasks such as settings, details, comments, notifications or an assistant, without leaving the current screen.8 examplesuseCopyToClipboardCopy text with a temporary copied state and a fallback.useEventListenerDeclarative DOM event listener with cleanup.useHotkeyKeyboard shortcuts with platform-aware mod keys.useHoverPointer hover state with props to spread, ignoring touch.