Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProTrack the scroll offset of the window or of one element, batched to one update per frame, with horizontal and vertical values.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it to show a back-to-top button after 400px, a reading-progress bar, a sticky header that changes style, or a parallax value.
Do not use it to detect direction (use useScrollDirection) or when an element is visible (use useInView). For pure visual effects CSS scroll-driven animations are cheaper.
import { useScrollPosition } from "@/hooks/use-scroll-position"const { y } = useScrollPosition()
const showTop = y > 400useScrollPosition(target?): { x: number; y: number }
| Name | Type | Description |
|---|---|---|
target | RefObject<HTMLElement | null> | HTMLElement | null | Scrolling element. Omit for the window. |
Listeners are passive and updates are coalesced with requestAnimationFrame. Values are 0 on the server and before the first measurement. Listeners and the pending frame are removed on unmount.
A hook has no markup. A back-to-top button that appears from this value must be a real button that is reachable by keyboard and moves focus sensibly, and sticky effects must not hide content behind the header (WCAG 2.4.11).
The hook ships with renderHook tests (use-scroll-position.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.