mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-18 00:01:55 +03:00
Code Issues Projects Releases Packages Wiki Activity

Set scroll threshold for up/down

Browse source 
Else it'll be too trippy
This commit is contained in:
Lim Chee Aun 2023-01-02 23:16:49 +08:00
parent 7408d7a5d4
commit 5074716378
1 changed files with 7 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/utils/useScroll.js
View file

@ -4,6 +4,7 @@ export default function useScroll({
scrollableElement = window,
distanceFromTop = 0,
distanceFromBottom = 0,
scrollThreshold = 10,
} = {}) {
const [scrollDirection, setScrollDirection] = useState(null);
const [reachTop, setReachTop] = useState(false);
@ -15,9 +16,12 @@ export default function useScroll({
function onScroll() {
const { scrollTop, scrollHeight, clientHeight } = scrollableElement;
const scrollDistance = Math.abs(scrollTop - previousScrollTop);
setScrollDirection(previousScrollTop < scrollTop ? 'down' : 'up');
previousScrollTop = scrollTop;
if (scrollDistance >= scrollThreshold) {
setScrollDirection(previousScrollTop < scrollTop ? 'down' : 'up');
previousScrollTop = scrollTop;
}
setReachTop(scrollTop === 0);
setNearReachTop(scrollTop <= distanceFromTop);
@ -29,7 +33,7 @@ export default function useScroll({
scrollableElement.addEventListener('scroll', onScroll, { passive: true });
return () => scrollableElement.removeEventListener('scroll', onScroll);
}, [scrollableElement, distanceFromTop, distanceFromBottom]);
}, [scrollableElement, distanceFromTop, distanceFromBottom, scrollThreshold]);
return { scrollDirection, reachTop, nearReachTop, nearReachBottom };
}