useScrollDirection.js

useScrollDirection.js

import { useEffect, useRef, useState } from 'react';

export function useScrollDirection(element = window) {
    const prevScrollY = useRef(0)
    const [goingUp, setGoingUp] = useState(false);

    const handleScroll = () => {
        const currentScrollY = element.scrollTop;
        if (prevScrollY.current < currentScrollY && goingUp) {
            setGoingUp(false);
        }
        if (prevScrollY.current > currentScrollY && !goingUp) {
            setGoingUp(true);
        }
        prevScrollY.current = currentScrollY;
    };

    useEffect(() => {
        element.addEventListener("scroll", handleScroll);
        return () => element.removeEventListener("scroll", handleScroll);
    }, [goingUp]);

    return goingUp ? 'up' : 'down';
}