simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Throttle scroll events

Browse source
This commit is contained in:
Lim Chee Aun 2024-01-02 12:25:25 +08:00
parent df393ae959
commit d8ceb03d74
1 changed files with 54 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/utils/useScrollFn.js
View file

@ -1,4 +1,5 @@
import { useEffect, useLayoutEffect, useState } from 'preact/hooks';
import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
import { useThrottledCallback } from 'use-debounce';
export default function useScrollFn(
{
@ -22,15 +23,10 @@ export default function useScrollFn(
const [nearReachStart, setNearReachStart] = useState(false);
const [nearReachEnd, setNearReachEnd] = useState(false);
const isVertical = direction === 'vertical';
const previousScrollStart = useRef(null);
useLayoutEffect(() => {
const onScroll = useThrottledCallback(() => {
const scrollableElement = scrollableRef.current;
if (!scrollableElement) return {};
let previousScrollStart = isVertical
? scrollableElement.scrollTop
: scrollableElement.scrollLeft;
function onScroll() {
const {
scrollTop,
scrollLeft,
@ -42,7 +38,7 @@ export default function useScrollFn(
const scrollStart = isVertical ? scrollTop : scrollLeft;
const scrollDimension = isVertical ? scrollHeight : scrollWidth;
const clientDimension = isVertical ? clientHeight : clientWidth;
const scrollDistance = Math.abs(scrollStart - previousScrollStart);
const scrollDistance = Math.abs(scrollStart - previousScrollStart.current);
const distanceFromStartPx =
_distanceFromStartPx ||
Math.min(
@ -60,12 +56,14 @@ export default function useScrollFn(
if (
scrollDistance >=
(previousScrollStart < scrollStart
(previousScrollStart.current < scrollStart
? scrollThresholdEnd
: scrollThresholdStart)
) {
setScrollDirection(previousScrollStart < scrollStart ? 'end' : 'start');
previousScrollStart = scrollStart;
setScrollDirection(
previousScrollStart.current < scrollStart ? 'end' : 'start',
);
previousScrollStart.current = scrollStart;
}
setReachStart(scrollStart <= 0);
@ -74,7 +72,13 @@ export default function useScrollFn(
setNearReachEnd(
scrollStart + clientDimension >= scrollDimension - distanceFromEndPx,
);
}
}, 500);
useLayoutEffect(() => {
const scrollableElement = scrollableRef.current;
if (!scrollableElement) return {};
previousScrollStart.current =
scrollableElement[isVertical ? 'scrollTop' : 'scrollLeft'];
scrollableElement.addEventListener('scroll', onScroll, { passive: true });