Fix scroll direction detection for Safari rubber-banding

src/utility/useScrollDirection.ts

@@ -1,14 +1,18 @@
 import { useEffect, useState, useRef } from 'react';
 
 export default function useScrollDirection() {
-  const [scrollDirection, setScrollDirection] =
-    useState<'up' | 'down'>('down');
+  const [scrollDirection, setScrollDirection] = useState<'up' | 'down'>('down');
 
   const lastScrollY = useRef(0);
 
   useEffect(() => {
     const handleScroll = () => {
-      setScrollDirection(window.scrollY > lastScrollY.current ? 'down' : 'up');
+      const pageHeight =
+        document.documentElement.scrollHeight - window.innerHeight;
+      setScrollDirection((
+        window.scrollY >= lastScrollY.current ||
+        lastScrollY.current > pageHeight
+      ) ? 'down' : 'up');
       lastScrollY.current = window.scrollY;
     };
     window.addEventListener('scroll', handleScroll);