@mantine/hooks/esm/use-scroll-direction/use-scroll-direction.mjs

A collection of 50+ hooks for state and UI management

"use client";
import { useEffect, useEffectEvent, useRef, useState } from "react";
//#region packages/@mantine/hooks/src/use-scroll-direction/use-scroll-direction.ts
function useScrollDirection() {
	const lastScrollTopRef = useRef(0);
	const [scrollDirection, setScrollDirection] = useState("unknown");
	const isResizingRef = useRef(false);
	const resizeTimerRef = useRef(void 0);
	const handleScroll = useEffectEvent(() => {
		if (isResizingRef.current) return;
		const currentScrollTop = window.scrollY || document.documentElement.scrollTop;
		setScrollDirection(currentScrollTop < lastScrollTopRef.current ? "up" : "down");
		lastScrollTopRef.current = currentScrollTop;
	});
	useEffect(() => {
		const handleResize = () => {
			isResizingRef.current = true;
			window.clearTimeout(resizeTimerRef.current);
			resizeTimerRef.current = window.setTimeout(() => {
				isResizingRef.current = false;
			}, 300);
		};
		window.addEventListener("scroll", handleScroll);
		window.addEventListener("resize", handleResize);
		return () => {
			window.removeEventListener("scroll", handleScroll);
			window.removeEventListener("resize", handleResize);
			clearTimeout(resizeTimerRef.current);
		};
	}, []);
	return scrollDirection;
}
//#endregion
export { useScrollDirection };

//# sourceMappingURL=use-scroll-direction.mjs.map