React hook to detect scroll direction, based on the API of https://github.com/dollarshaveclub/scrolldir

useScrollDirection.js

const SCROLL_UP = "up";
const SCROLL_DOWN = "down";

const useScrollDirection = ({
  initialDirection,
  thresholdPixels,
  off
} = {}) => {
  const [scrollDir, setScrollDir] = useState(initialDirection);

  useEffect(() => {
    const threshold = thresholdPixels || 0;
    let lastScrollY = window.pageYOffset;
    let ticking = false;

    const updateScrollDir = () => {
      const scrollY = window.pageYOffset;

      if (Math.abs(scrollY - lastScrollY) < threshold) {
        // We haven't exceeded the threshold
        ticking = false;
        return;
      }

      setScrollDir(scrollY > lastScrollY ? SCROLL_DOWN : SCROLL_UP);
      lastScrollY = scrollY > 0 ? scrollY : 0;
      ticking = false;
    };

    const onScroll = () => {
      if (!ticking) {
        window.requestAnimationFrame(updateScrollDir);
        ticking = true;
      }
    };

    /**
     * Bind the scroll handler if `off` is set to false.
     * If `off` is set to true reset the scroll direction.
     */
    !off
      ? window.addEventListener("scroll", onScroll)
      : setScrollDir(initialDirection);

    return () => window.removeEventListener("scroll", onScroll);
  }, [initialDirection, thresholdPixels, off]);

  return scrollDir;
};

Try this -

Install this package from npm - https://www.npmjs.com/package/react-use-scroll-direction

Then Detect Scroll Direction : - )

import React from 'react'
import { useScrollDirection } from 'react-use-scroll-direction'

export const Window_Scroll_Direction = () => {
  const [direction, setDirection] = React.useState(String)
  const { isScrollingUp, isScrollingDown } = useScrollDirection()

  React.useEffect(() => {
    isScrollingDown && setDirection('down')
    isScrollingUp && setDirection('up')
  }, [isScrollingDown, isScrollingUp])

  return (
    <>
      <div className="fixed top-0 bg-white">
        {direction === 'down' ? 'Scrolling down' : 'scrolling up'}
      </div>
    </>
  )
}