Skip to Content

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 coordinates
  • scrollTo: (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