@mantine/hooks
Version:
A collection of 50+ hooks for state and UI management
36 lines (35 loc) • 1.37 kB
JavaScript
"use client";
let react = require("react");
//#region packages/@mantine/hooks/src/use-scroll-direction/use-scroll-direction.ts
function useScrollDirection() {
const lastScrollTopRef = (0, react.useRef)(0);
const [scrollDirection, setScrollDirection] = (0, react.useState)("unknown");
const isResizingRef = (0, react.useRef)(false);
const resizeTimerRef = (0, react.useRef)(void 0);
const handleScroll = (0, react.useEffectEvent)(() => {
if (isResizingRef.current) return;
const currentScrollTop = window.scrollY || document.documentElement.scrollTop;
setScrollDirection(currentScrollTop < lastScrollTopRef.current ? "up" : "down");
lastScrollTopRef.current = currentScrollTop;
});
(0, react.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
exports.useScrollDirection = useScrollDirection;
//# sourceMappingURL=use-scroll-direction.cjs.map