Function useScroll

A React hook that tracks the current scroll position of the window or a specified element.

This hook listens for the scroll event and returns an object with the current horizontal (x) and vertical (y) scroll positions. It updates automatically whenever the user scrolls.

Example

import { useScroll } from "essential-hooks-collection";

const MyComponent = () => {
  const containerRef = useRef(null);
  const { x, y } = useScroll(containerRef);

  return (
    <div ref={containerRef} style={{ overflow: 'scroll', height: '200px' }}>
      <p>Scroll X: {x}</p>
      <p>Scroll Y: {y}</p>
      <div style={{ height: '1000px', width: '1000px' }}>Scroll me!</div>
    </div>
  );
};

Example

// Using the default window scroll
const MyComponent = () => {
  const { x, y } = useScroll();

  return (
    <div>
      <p>Scroll X: {x}</p>
      <p>Scroll Y: {y}</p>
    </div>
  );
};
  • useScroll(ref?: RefObject<null | HTMLElement>): { x: number; y: number }

    Parameters

    • Optionalref: RefObject<null | HTMLElement>

      A ref to the element whose scroll position should be tracked. If not provided, the window's scroll position will be tracked.

    Returns { x: number; y: number }

    An object containing the current scroll positions along the x and y axes.

Settings

Member Visibility