useScrollProgress

How far the page or a scrolling element has been scrolled.

const { progress, scrollTop, scrollable } = useScrollProgress(target)

Measures how far the page, or one scrolling element, has been scrolled. It updates while scrolling and when the size changes, and only re-renders when the numbers really change. Pass an element or a ref as target; leave it out for the page. A ref is read after the first render, so it can point at an element the same component renders. ScrollProgress and BackToTop are built on it.

Nothing to scroll

Banana fact 1. Scroll this box.

Banana fact 2. Scroll this box.

Banana fact 3. Scroll this box.

Banana fact 4. Scroll this box.

Banana fact 5. Scroll this box.

Banana fact 6. Scroll this box.

Banana fact 7. Scroll this box.

Banana fact 8. Scroll this box.

Banana fact 9. Scroll this box.

Banana fact 10. Scroll this box.

Banana fact 11. Scroll this box.

Banana fact 12. Scroll this box.

API

Parameters

targetHTMLElement | RefObject<HTMLElement>
Default: the page
What to measure: an element or a ref to one.

Parameters props
Prop	Type	Default	Description
`target`	HTMLElement \| RefObject<HTMLElement>	`the page`	What to measure: an element or a ref to one.

Returns

progressnumber
From 0 (top) to 1 (the end); 0 when there is nothing to scroll.
scrollTopnumber
Pixels scrolled from the top.
scrollableboolean
The target is taller than its view.

Returns props
Prop	Type	Default	Description
`progress`	number	–	From 0 (top) to 1 (the end); 0 when there is nothing to scroll.
`scrollTop`	number	–	Pixels scrolled from the top.
`scrollable`	boolean	–	The target is taller than its view.