crazy4groovy · December 1, 2023 17:16 · Dec 1, 2023 · Dec 1, 2023
diff --git a/useScrollTracker.ts b/useScrollTracker.ts
@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+interface ScrollTrackerResult {
+  isScrollable: boolean;
+  isAtTop: boolean;
+  isAtBottom: boolean; 
+}
+
+function useScrollTracker(ref: React.RefObject<HTMLElement>): ScrollTrackerResult {
+  const [isScrollable, setIsScrollable] = useState(false);
+  const [isAtTop, setIsAtTop] = useState(true);
+  const [isAtBottom, setIsAtBottom] = useState(false);
+
+  const getScrollState = useCallback(() => {
+    if (ref.current) {
+      const { scrollTop, scrollHeight, clientHeight } = ref.current;
+
+      setIsScrollable(scrollHeight > clientHeight);
+      setIsAtTop(scrollTop === 0);
+      setIsAtBottom(scrollTop + clientHeight >= scrollHeight);
+    }
+  }, [ref]);
+
+  const debouncedGetScrollState = useRef(debounce(getScrollState, 100));
+
+  useEffect(() => {
+    const element = ref.current;
+
+    if (element) {
+      element.addEventListener("scroll", debouncedGetScrollState.current);
+
+      return () => element.removeEventListener("scroll", 
+        debouncedGetScrollState.current);
+    }
+  }, [debouncedGetScrollState]);
+
+  const state: ScrollTrackerResult = useMemo(() => ({
+    isScrollable, 
+    isAtTop,
+    isAtBottom
+  }), [isScrollable, isAtTop, isAtBottom]);
+
+  return state;
+}
+
+function debounce(fn: () => any, delayMs = 100) {
+  let timeout: any;
+  return () => {
+    clearTimeout(timeout);
+    timeout = setTimeout(fn, delayMs);
+  }
+}
+
+export default useScrollTracker;