useScroll
A hook that tracks window scroll position and provides scrolling functionality. Perfect for implementing scroll-based features and animations.
Parameters
This hook doesn’t take any parameters.
Returns
position
:{ x: number; y: number }
- Current scroll position coordinatesscrollTo
:(x: number, y: number) => void
- Function to scroll to specific coordinates
Usage
import { useScroll } from '@rhinolabs/react-hooks';
function ScrollTracker() {
const { position, scrollTo } = useScroll();
return (
<div>
<div>
Scroll Position:
X: {position.x}px,
Y: {position.y}px
</div>
<button onClick={() => scrollTo(0, 0)}>
Scroll to Top
</button>
</div>
);
}
Notes
- Uses useLayoutEffect for smooth updates
- Automatically handles scroll event cleanup
- Provides current X and Y coordinates
- Includes native scrollTo function
- Updates in real-time while scrolling
- Zero setup required
- Efficient scroll tracking
Last updated on