useWindowScroll

Track and manipulate the scroll position of a web page with useWindowScroll.

Install:

npm i @uidotdev/usehooks

Description:

The useWindowScroll hook is useful for tracking and manipulating the scroll position of a web page within a React component. It allows you to easily access the current scroll coordinates (x and y) through the “state” object returned by the hook. Additionally, the hook provides a “scrollTo” function that can be used to programmatically scroll to a specific position on the page. This hook is helpful when building components that require dynamic behavior based on the scroll position, such as lazy-loading content, infinite scrolling, or implementing smooth scrolling animations.

Return Value

The useWindowScroll hook returns an array with two elements:

NameTypeDescription
stateobjectAn object representing the current window scroll position.
scrollTofunctionA function that can be used to scroll the window to a specific position.

Demo:

Example:

import * as React from "react";
import { useWindowScroll } from "@uidotdev/usehooks";

export default function App() {
  const [{ x, y }, scrollTo] = useWindowScroll();
  return (
    <section>
      <header>
        <h1>useWindowScroll</h1>
        <button className="link" onClick={() => scrollTo(0, 1000)}>
          Scroll To (0, 1000)
        </button>
        <button
          className="link"
          onClick={() => scrollTo({ left: 0, top: 2000, behavior: "smooth" })}
        >
          Scroll To (0, 2000) (Smoothly)
        </button>
        <button
          className="link"
          onClick={() => scrollTo({ left: 0, top: 0, behavior: "smooth" })}
        >
          Back To The Top
        </button>
      </header>

      {new Array(50).fill().map((_, index) => {
        return <p key={index}>{index}</p>;
      })}
      <aside style={{ position: "fixed", bottom: 0, right: 0 }}>
        Coordinates <span className="x">x: {x}</span>{" "}
        <span className="y">y: {y}</span>{" "}
      </aside>
    </section>
  );
}

More Hooks:

Sort: