Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

useScrollPosition

The vertical scroll offset of the page or a scroll container.

HooksLayout@gaudi/design-system/hooks/layout/use-scroll-positionView in StorybookSource

Follows window scrolling, or the element in targetRef, with a passive listener. 0 during server rendering.

Usage

import { useScrollPosition } from '@gaudi/design-system/hooks';
const scrollY = useScrollPosition();const compact = scrollY > 64;

Examples

Reading progress in a scroll container

Storybook

Page scroll

Storybook

API

1 option
1 return value

Accessibility

A back-to-top control revealed by scrolling should stay in the tab order (hidden with inert or visibility, not just opacity) and move focus sensibly.

Notes

  • Updates on every scroll event; throttle derived work with useThrottleCallback.
useThrottleCallbackA function that runs at most once per interval.useCollapsibleSectionsExpanded state for several sections, with expand all and collapse all.useElementSizeAn element's size, kept current with a ResizeObserver.useInViewWhether an element is in the viewport, from an IntersectionObserver.