diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx index fa6d055d..491b72be 100644 --- a/src/components/timeline.jsx +++ b/src/components/timeline.jsx @@ -168,7 +168,7 @@ function Timeline({ reachStart, reachEnd, } = useScroll({ - scrollableElement: scrollableRef.current, + scrollableRef, distanceFromEnd: 2, scrollThresholdStart: 44, }); @@ -477,7 +477,7 @@ function groupBoosts(values) { function StatusCarousel({ title, class: className, children }) { const carouselRef = useRef(); const { reachStart, reachEnd, init } = useScroll({ - scrollableElement: carouselRef.current, + scrollableRef: carouselRef, direction: 'horizontal', }); useEffect(() => { diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx index 0d0e0473..d1855036 100644 --- a/src/pages/notifications.jsx +++ b/src/pages/notifications.jsx @@ -58,7 +58,7 @@ function Notifications() { const scrollableRef = useRef(); const { nearReachEnd, scrollDirection, reachStart, nearReachStart } = useScroll({ - scrollableElement: scrollableRef.current, + scrollableRef, }); const hiddenUI = scrollDirection === 'end' && !nearReachStart; diff --git a/src/pages/status.jsx b/src/pages/status.jsx index 80439378..3c0f7f33 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -456,7 +456,7 @@ function StatusPage() { }); const { nearReachStart } = useScroll({ - scrollableElement: scrollableRef.current, + scrollableRef, distanceFromStartPx: 16, }); diff --git a/src/utils/useScroll.js b/src/utils/useScroll.js index dbbe7c76..e8a258e1 100644 --- a/src/utils/useScroll.js +++ b/src/utils/useScroll.js @@ -1,7 +1,7 @@ import { useEffect, useState } from 'preact/hooks'; export default function useScroll({ - scrollableElement, + scrollableRef, distanceFromStart = 1, // ratio of clientHeight/clientWidth distanceFromEnd = 1, // ratio of clientHeight/clientWidth scrollThresholdStart = 10, @@ -17,12 +17,8 @@ export default function useScroll({ const [nearReachEnd, setNearReachEnd] = useState(false); const isVertical = direction === 'vertical'; - if (!scrollableElement) { - // Better be explicit instead of auto-assign to window - return {}; - } - useEffect(() => { + const scrollableElement = scrollableRef.current; let previousScrollStart = isVertical ? scrollableElement.scrollTop : scrollableElement.scrollLeft; @@ -77,7 +73,6 @@ export default function useScroll({ return () => scrollableElement.removeEventListener('scroll', onScroll); }, [ - scrollableElement, distanceFromStart, distanceFromEnd, scrollThresholdStart, @@ -91,8 +86,8 @@ export default function useScroll({ nearReachStart, nearReachEnd, init: () => { - if (scrollableElement) { - scrollableElement.dispatchEvent(new Event('scroll')); + if (scrollableRef.current) { + scrollableRef.current.dispatchEvent(new Event('scroll')); } }, };