@servicetitan/assist-ui
Version:
ServiceTitan Atlas UI Components
45 lines (44 loc) • 1.61 kB
JavaScript
import { useCallback, useEffect, useRef } from 'react';
export const useScrollCallback = ({ onScrollDown, onScrollTop, threshold = 50, element } = {})=>{
const lastScrollTop = useRef(0);
const hasTriggeredScrollDown = useRef(false);
const handleScroll = useCallback(()=>{
const scrollTop = element ? element.scrollTop : window.scrollY || document.documentElement.scrollTop;
// Check if scrolled down past threshold
if (scrollTop >= threshold && !hasTriggeredScrollDown.current) {
hasTriggeredScrollDown.current = true;
onScrollDown === null || onScrollDown === void 0 ? void 0 : onScrollDown();
}
// Check if scrolled back to top
if (scrollTop === 0 && hasTriggeredScrollDown.current) {
hasTriggeredScrollDown.current = false;
onScrollTop === null || onScrollTop === void 0 ? void 0 : onScrollTop();
}
lastScrollTop.current = scrollTop;
}, [
onScrollDown,
onScrollTop,
threshold,
element
]);
useEffect(()=>{
if (!element) {
return;
}
const targetElement = element;
targetElement.addEventListener('scroll', handleScroll, {
passive: true
});
return ()=>{
targetElement.removeEventListener('scroll', handleScroll);
};
}, [
handleScroll,
element
]);
return {
lastScrollTop: lastScrollTop.current,
hasTriggeredScrollDown: hasTriggeredScrollDown.current
};
};
//# sourceMappingURL=use-scroll-callback.js.map