useScrollPosition.js

import { useEffect, useState } from "react";

const useScrollPosition = (callback) => {
  // copy callback to ref, using useLayoutEffect
	const callbackRef = useConstantRefCallback(callback);

	useEffect(() => {
		let lastKnownScrollPosition = 0;
		let previousLastKnownScrollPosition = 0;
		let ticking = false;
		const handleScroll = () => {
			previousLastKnownScrollPosition = lastKnownScrollPosition;
			lastKnownScrollPosition = window.scrollY;

			if (!ticking) {
				window.requestAnimationFrame(() => {
					callbackRef(lastKnownScrollPosition, previousLastKnownScrollPosition);
					ticking = false;
				});

				ticking = true;
			}
		};
		window.addEventListener("scroll", handleScroll);

		return () => {
			window.removeEventListener("scroll", handleScroll);
		};
	}, [callbackRef]);
};

export const useScrollDirection = () => {
	const [direction, setDirection] = useState("unknown");

	useScrollPosition((position, previousPosition) => {
		if (position > previousPosition) {
			setDirection("down");
		}
		if (position < previousPosition) {
			setDirection("up");
		}
	});

	return direction;
};

export const useDoesScrollPositionSatisfy = (match, initialState = false) => {
	const [doesSatisfy, setDoesSatisfy] = useState(initialState);

	useScrollPosition((position) => {
		setDoesSatisfy(match(position));
	});

	return doesSatisfy;
};

export default useScrollPosition;