From de45a0f9d563c0c6807cf41e02a72e8438de98c4 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 5 Jan 2023 15:29:11 +0800
Subject: [PATCH] Update useScroll to check distance in threshold instead of
 pixels

---
 src/pages/home.jsx     | 9 +++++----
 src/utils/useScroll.js | 8 ++++++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/pages/home.jsx b/src/pages/home.jsx
index 70c441ed..d3abe301 100644
--- a/src/pages/home.jsx
+++ b/src/pages/home.jsx
@@ -165,8 +165,8 @@ function Home({ hidden }) {
   const { scrollDirection, reachTop, nearReachTop, nearReachBottom } =
     useScroll({
       scrollableElement: scrollableRef.current,
-      distanceFromTop: window.innerHeight / 2,
-      distanceFromBottom: window.innerHeight,
+      distanceFromTop: 0.1,
+      distanceFromBottom: 0.15,
     });
 
   useEffect(() => {
@@ -247,8 +247,9 @@ function Home({ hidden }) {
           </div>
         </header>
         {snapStates.homeNew.length > 0 &&
-          ((scrollDirection === 'up' && !nearReachTop && !nearReachBottom) ||
-            reachTop) && (
+          scrollDirection === 'up' &&
+          !nearReachTop &&
+          !nearReachBottom && (
             <button
               class="updates-button"
               type="button"
diff --git a/src/utils/useScroll.js b/src/utils/useScroll.js
index c5754e3d..eb84024a 100644
--- a/src/utils/useScroll.js
+++ b/src/utils/useScroll.js
@@ -17,6 +17,10 @@ export default function useScroll({
     function onScroll() {
       const { scrollTop, scrollHeight, clientHeight } = scrollableElement;
       const scrollDistance = Math.abs(scrollTop - previousScrollTop);
+      const distanceFromTopPx =
+        scrollHeight * Math.min(1, Math.max(0, distanceFromTop));
+      const distanceFromBottomPx =
+        scrollHeight * Math.min(1, Math.max(0, distanceFromBottom));
 
       if (scrollDistance >= scrollThreshold) {
         setScrollDirection(previousScrollTop < scrollTop ? 'down' : 'up');
@@ -24,9 +28,9 @@ export default function useScroll({
       }
 
       setReachTop(scrollTop === 0);
-      setNearReachTop(scrollTop <= distanceFromTop);
+      setNearReachTop(scrollTop <= distanceFromTopPx);
       setNearReachBottom(
-        scrollTop + clientHeight >= scrollHeight - distanceFromBottom,
+        scrollTop + clientHeight >= scrollHeight - distanceFromBottomPx,
       );
     }