Skip to main content

useScrollPosition()

The useScrollPosition hook returns the current vertical scroll position (scrollY) of the window, updating automatically as the user scrolls. It’s useful for monitoring scroll behavior, debugging scroll-based interactions, or creating UI elements that respond to scroll position, such as position indicators or scroll-triggered effects.

Import​

import { useScrollPosition } from "reactuals";

Demo​

See the floating card in the right. ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯→

Loading...

Usage​

import React from "react";
import { useScrollPosition } from "reactuals";

export const Component = () => {
  const scrollY = useScrollPosition();

  return (
    <div>
      <p>Scroll Position: {scrollY}px</p>
      <div style={{ height: "200vh" }}>
        <p>Scroll to see position updates.</p>
      </div>
    </div>
  );
};