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