Fix useScroll bug

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(() => {

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;
 

src/pages/status.jsx

@@ -456,7 +456,7 @@ function StatusPage() {
   });
 
   const { nearReachStart } = useScroll({
-    scrollableElement: scrollableRef.current,
+    scrollableRef,
     distanceFromStartPx: 16,
   });
 

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'));
       }
     },
   };