diff --git a/src/pages/status.jsx b/src/pages/status.jsx index 8d3a488e..80439378 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -457,7 +457,7 @@ function StatusPage() { const { nearReachStart } = useScroll({ scrollableElement: scrollableRef.current, - distanceFromStart: 0.2, + distanceFromStartPx: 16, }); return ( diff --git a/src/utils/useScroll.js b/src/utils/useScroll.js index af45ece9..dbbe7c76 100644 --- a/src/utils/useScroll.js +++ b/src/utils/useScroll.js @@ -7,6 +7,8 @@ export default function useScroll({ scrollThresholdStart = 10, scrollThresholdEnd = 10, direction = 'vertical', + distanceFromStartPx: _distanceFromStartPx, + distanceFromEndPx: _distanceFromEndPx, } = {}) { const [scrollDirection, setScrollDirection] = useState(null); const [reachStart, setReachStart] = useState(false); @@ -38,16 +40,20 @@ export default function useScroll({ const scrollDimension = isVertical ? scrollHeight : scrollWidth; const clientDimension = isVertical ? clientHeight : clientWidth; const scrollDistance = Math.abs(scrollStart - previousScrollStart); - const distanceFromStartPx = Math.min( - clientDimension * distanceFromStart, - scrollDimension, - scrollStart, - ); - const distanceFromEndPx = Math.min( - clientDimension * distanceFromEnd, - scrollDimension, - scrollDimension - scrollStart - clientDimension, - ); + const distanceFromStartPx = + _distanceFromStartPx || + Math.min( + clientDimension * distanceFromStart, + scrollDimension, + scrollStart, + ); + const distanceFromEndPx = + _distanceFromEndPx || + Math.min( + clientDimension * distanceFromEnd, + scrollDimension, + scrollDimension - scrollStart - clientDimension, + ); if ( scrollDistance >=