useScrollPosition

Tracks the current scroll position of the page.

useScrollPosition

This component uses the useScrollPosition hook to track the page scroll position.

Scroll X: 0px

Scroll Y: 0px

Scroll the page to see the values change.

Installation

Prop	Type	Default	Description
`onChange?`	`(x: number, y: number) => void`	`undefined`	A callback function called when the scroll position changes.

Prop	Type	Description
`x`	`number`	The horizontal scroll offset (px).
`y`	`number`	The vertical scroll offset (px).

The hook checks if it's running in a browser. On the server, it returns 0 for both x and y.
On mount, the hook initializes the scroll position based on the current window.scrollX and window.scrollY.

The scroll listener is registered with { passive: true } for better performance.
The listener is cleaned up on unmount to prevent memory leaks.

const { x, y } = useScrollPosition();
return (
  <div>
    Scroll position: {x} x {y}
  </div>
);

useScrollPosition({
  onChange: (x, y) => {
    console.log('Scroll position:', x, y);
  },
});