useScrollPosition
Real-time window or element scroll offset coordinates (X and Y).
2.1 KB
•Updated on September 3, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/hooks-dom-use-scroll-positionUsage
Code
import { useScrollPosition } from '@/hooks/use-scroll-position'
// Pattern 1: Object destructuring with scrollX / scrollY
const { scrollX, scrollY } = useScrollPosition()
// Pattern 2: Object destructuring with x / y
const { x, y } = useScrollPosition()
// Pattern 3: Array tuple destructuring
const [x, y] = useScrollPosition()
// Pattern 4: Target container element
const containerRef = useRef<HTMLDivElement>(null)
const { scrollY } = useScrollPosition(containerRef)API Reference
Parameters / Props
| Parameter | Type | Default | Description |
|---|---|---|---|
targetRef | RefObject<HTMLElement|null> | - | Optional DOM element ref to measure instead of the window. |
Return Value
| Property | Type | Description |
|---|---|---|
scrollX | number | Horizontal scroll offset in pixels (alias: x / [0]). |
scrollY | number | Vertical scroll offset in pixels (alias: y / [1]). |
x | number | Horizontal coordinate. |
y | number | Vertical coordinate. |