feat: add the ability to specify a scrollable target element for tracking scroll direction

Readme.md

@@ -43,6 +43,7 @@ import useDetectScroll, {
 
 The `useDetectScroll` hook takes an options object with the following properties:
 
+- `target`: The target scrollable element from which to detect scroll direction and position (default: `window`, must be an `HTMLDivElement`).
 - `thr`: Threshold for scroll direction change detection (default: `0`, accepts only positive values).
 - `axis`: Defines the scroll axis (`"y"` or `"x"`, default: `"y"`).
 - `scrollUp`: Value returned when scrolling up (y-axis) or left (x-axis) (default: `"up"` for y-axis, `"left"` for x-axis).
@@ -74,6 +75,20 @@ const { scrollDir, scrollPosition } = useDetectScroll({ axis: Axis.X });
 // scrollPosition: { top, bottom, left, right }
 ```
 
+To use a custom scrollable element as a target rather than the default window:
+
+```js
+const customElementRef = useRef<HTMLDivElement>(null);
+const [customElement, setCustomElement] = useState<HTMLDivElement>();
+    useEffect(() => {
+        if(customElementRef.current) {
+            setHomepageElement(customElementRef.current);
+        }
+    }, [customElementRef])
+    const scrollDir = useDetectScroll({target: customElement});
+    console.log(scrollDir);
+```
+
 ## Contributing
 
 Interested in making contributions to this project? Please see [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines and details.

package.json

@@ -80,5 +80,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "4.1.0"
+  "version": "4.2.0"
 }

src/index.ts

@@ -69,6 +69,10 @@ type ScrollInfo = {
 
 /** Type declaration for scroll properties */
 type ScrollProps = {
+  /**
+   * The target represents the scrollable element to check for scroll detection.
+   */
+  target?: HTMLDivElement | Window;
   /**
    * The thr represents the threshold value for scroll detection.
    */
@@ -125,6 +129,7 @@ type ScrollProps = {
  */
 function useDetectScroll(props: ScrollProps = {}): ScrollInfo {
   const {
+    target = window,
     thr = 0,
     axis = Axis.Y,
     scrollUp = axis === Axis.Y ? Direction.Up : Direction.Left,
@@ -146,40 +151,70 @@ function useDetectScroll(props: ScrollProps = {}): ScrollInfo {
 
   /** Function to update scroll direction */
   const updateScrollDir = useCallback(() => {
-    const scroll = axis === Axis.Y ? window.scrollY : window.scrollX;
+    let scroll: number;
+    if (target instanceof Window) {
+      scroll = axis === Axis.Y ? target.scrollY : target.scrollX;
+    } else {
+      scroll =
+        axis === Axis.Y
+          ? (target as HTMLDivElement).scrollTop
+          : (target as HTMLDivElement).scrollLeft;
+    }
 
     if (Math.abs(scroll - lastScroll.current) >= threshold) {
       setScrollDir(scroll > lastScroll.current ? scrollDown : scrollUp);
       lastScroll.current = Math.max(0, scroll);
     }
     ticking.current = false;
-  }, [axis, threshold, scrollDown, scrollUp]);
+  }, [target, axis, threshold, scrollDown, scrollUp]);
 
   useEffect(() => {
     /** Function to update scroll position */
     const updateScrollPosition = () => {
-      const top = window.scrollY;
-      const left = window.scrollX;
+      const top =
+        target instanceof Window
+          ? target.scrollY
+          : (target as HTMLDivElement).scrollTop;
+      const left =
+        target instanceof Window
+          ? target.scrollX
+          : (target as HTMLDivElement).scrollLeft;
       const bottom =
-        document.documentElement.scrollHeight - window.innerHeight - top;
+        document.documentElement.scrollHeight -
+        (target instanceof Window
+          ? target.innerHeight
+          : (target as HTMLDivElement).scrollHeight) -
+        top;
       const right =
-        document.documentElement.scrollWidth - window.innerWidth - left;
+        document.documentElement.scrollWidth -
+        (target instanceof Window
+          ? target.innerWidth
+          : (target as HTMLDivElement).scrollWidth) -
+        left;
 
       setScrollPosition({ top, bottom, left, right });
     };
 
     /** Call the update function when the component mounts */
     updateScrollPosition();
 
-    window.addEventListener('scroll', updateScrollPosition);
+    const targetElement = target as EventTarget;
+    targetElement.addEventListener('scroll', updateScrollPosition);
 
     return () => {
-      window.removeEventListener('scroll', updateScrollPosition);
+      targetElement.removeEventListener('scroll', updateScrollPosition);
     };
-  }, []);
+  }, [target]);
 
   useEffect(() => {
-    lastScroll.current = axis === Axis.Y ? window.scrollY : window.scrollX;
+    if (target instanceof Window) {
+      lastScroll.current = axis === Axis.Y ? target.scrollY : target.scrollX;
+    } else {
+      lastScroll.current =
+        axis === Axis.Y
+          ? (target as HTMLDivElement).scrollTop
+          : (target as HTMLDivElement).scrollLeft;
+    }
 
     /** Function to handle onScroll event */
     const onScroll = () => {
@@ -189,10 +224,11 @@ function useDetectScroll(props: ScrollProps = {}): ScrollInfo {
       }
     };
 
-    window.addEventListener('scroll', onScroll);
+    const targetElement = target as EventTarget;
+    targetElement.addEventListener('scroll', onScroll);
 
-    return () => window.removeEventListener('scroll', onScroll);
-  }, [axis, updateScrollDir]);
+    return () => targetElement.removeEventListener('scroll', onScroll);
+  }, [target, axis, updateScrollDir]);
 
   return { scrollDir, scrollPosition };
 }