react-pre-hooksuseScrollPosition
This hook tracks the scroll position and progress of a target element.
Parameters
- the
refobject of the target element (default iswindow).
Return Values
| Name | Type | Description |
|---|---|---|
| ref | RefObject | the target element reference. |
| x | Number | the x scroll position. |
| y | Number | the y scroll position. |
| progressX | Number | the x scroll progress (between 0 and 1). |
| progressY | Number | the y scroll progress (between 0 and 1). |
Example Usage
tsx
import { useScrollPosition } from 'react-pre-hooks';
export default function Example() {
const { x, progressY } = useScrollPosition();
return (
<main>
<p>
x: {x}px, y: {progressY}%
</p>
</main>
);
}import { useScrollPosition } from 'react-pre-hooks';
export default function Example() {
const { x, progressY } = useScrollPosition();
return (
<main>
<p>
x: {x}px, y: {progressY}%
</p>
</main>
);
}