From a96aff05f1885abdb2b4f847b6cd36610f08431a Mon Sep 17 00:00:00 2001 From: debabin Date: Sat, 8 Feb 2025 16:09:05 +0700 Subject: [PATCH] =?UTF-8?q?main=20=F0=9F=A7=8A=20use=20scroll=20rework?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useHover/useHover.ts | 88 +++---- src/hooks/useParallax/useParallax.demo.tsx | 62 ++--- src/hooks/useScroll/useScroll.demo.tsx | 204 ++++++---------- src/hooks/useScroll/useScroll.ts | 261 +++++++++++---------- src/utils/helpers/isTarget.ts | 1 - 5 files changed, 286 insertions(+), 330 deletions(-) diff --git a/src/hooks/useHover/useHover.ts b/src/hooks/useHover/useHover.ts index f8a0c894..3325756f 100644 --- a/src/hooks/useHover/useHover.ts +++ b/src/hooks/useHover/useHover.ts @@ -1,34 +1,34 @@ import type { RefObject } from 'react'; -import { useRef, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; -import { useEventListener } from '../useEventListener/useEventListener'; +import { getElement, isTarget } from '@/utils/helpers'; + +//* The use hover target type */ +export type UseHoverTarget = string | Element | RefObject; //* The use hover options type */ export interface UseHoverOptions { //* The on entry callback */ - onEntry?: () => void; + onEntry?: (event: Event) => void; //* The on leave callback */ - onLeave?: () => void; + onLeave?: (event: Event) => void; } -//* The use hover target type */ -export type UseHoverTarget = Element | RefObject; - export interface UseHover { - (target: Target, callback?: () => void): boolean; + (target: Target, callback?: (event: Event) => void): boolean; (target: Target, options?: UseHoverOptions): boolean; ( - callback?: () => void, + callback?: (event: Event) => void, target?: never - ): [RefObject, boolean]; + ): [(node: Target) => void, boolean]; ( options?: UseHoverOptions, target?: never - ): [RefObject, boolean]; + ): [(node: Target) => void, boolean]; } /** @@ -39,7 +39,7 @@ export interface UseHover { * @overload * @template Target The target element * @param {Target} target The target element to be hovered - * @param {() => void} [callback] The callback function to be invoked on mouse enter + * @param {(event: Event) => void} [callback] The callback function to be invoked on mouse enter * @returns {boolean} The state of the hover * * @example @@ -48,19 +48,16 @@ export interface UseHover { * @overload * @template Target The target element * @param {Target} target The target element to be hovered - * @param {() => void} [options.onEntry] The callback function to be invoked on mouse enter - * @param {() => void} [options.onLeave] The callback function to be invoked on mouse leave + * @param {(event: Event) => void} [options.onEntry] The callback function to be invoked on mouse enter + * @param {(event: Event) => void} [options.onLeave] The callback function to be invoked on mouse leave * @returns {boolean} The state of the hover * * @example - * const hovering = useHover(ref, { - * onEntry: () => console.log('onEntry'), - * onLeave: () => console.log('onLeave'), - * }); + * const hovering = useHover(ref, options); * * @overload * @template Target The target element - * @param {() => void} [callback] The callback function to be invoked on mouse enter + * @param {(event: Event) => void} [callback] The callback function to be invoked on mouse enter * @returns {UseHoverReturn} The state of the hover * * @example @@ -68,22 +65,15 @@ export interface UseHover { * * @overload * @template Target The target element - * @param {() => void} [options.onEntry] The callback function to be invoked on mouse enter - * @param {() => void} [options.onLeave] The callback function to be invoked on mouse leave + * @param {(event: Event) => void} [options.onEntry] The callback function to be invoked on mouse enter + * @param {(event: Event) => void} [options.onLeave] The callback function to be invoked on mouse leave * @returns {UseHoverReturn} The state of the hover * * @example - * const [ref, hovering] = useHover({ - * onEntry: () => console.log('onEntry'), - * onLeave: () => console.log('onLeave'), - * }); + * const [ref, hovering] = useHover(options); */ export const useHover = ((...params: any[]) => { - const target = ( - params[0] instanceof Function || !('current' in params[0] || params[0] instanceof Element) - ? undefined - : params[0] - ) as UseHoverTarget | undefined; + const target = (isTarget(params[0]) ? params[0] : undefined) as UseHoverTarget | undefined; const options = ( target @@ -96,21 +86,35 @@ export const useHover = ((...params: any[]) => { ) as UseHoverOptions | undefined; const [hovering, setHovering] = useState(false); - const internalRef = useRef(); + const [internalRef, setInternalRef] = useState(); + const internalOptionsRef = useRef(options); + internalOptionsRef.current = options; + + useEffect(() => { + if (!target && !internalRef) return; + const element = (target ? getElement(target) : internalRef) as Element; + + if (!element) return; + + const onMouseEnter = (event: Event) => { + internalOptionsRef.current?.onEntry?.(event); + setHovering(true); + }; - const onMouseEnter = () => { - options?.onEntry?.(); - setHovering(true); - }; + const onMouseLeave = (event: Event) => { + internalOptionsRef.current?.onLeave?.(event); + setHovering(false); + }; - const onMouseLeave = () => { - options?.onLeave?.(); - setHovering(false); - }; + element.addEventListener('mouseenter', onMouseEnter); + element.addEventListener('mouseleave', onMouseLeave); - useEventListener(target ?? internalRef, 'mouseenter', onMouseEnter); - useEventListener(target ?? internalRef, 'mouseleave', onMouseLeave); + return () => { + element.removeEventListener('mouseenter', onMouseEnter); + element.removeEventListener('mouseleave', onMouseLeave); + }; + }, [target, internalRef]); if (target) return hovering; - return [internalRef, hovering] as const; + return [setInternalRef, hovering] as const; }) as UseHover; diff --git a/src/hooks/useParallax/useParallax.demo.tsx b/src/hooks/useParallax/useParallax.demo.tsx index adadbdf6..213db2c8 100644 --- a/src/hooks/useParallax/useParallax.demo.tsx +++ b/src/hooks/useParallax/useParallax.demo.tsx @@ -2,16 +2,40 @@ import type { CSSProperties } from 'react'; import { useParallax } from './useParallax'; +const layerBase: CSSProperties = { + position: 'absolute', + height: '100%', + width: '100%', + transition: '.3s ease-out all' +}; + +const containerStyle: CSSProperties = { + margin: '3em auto', + perspective: '200px' +}; + +const cardContentStyle: CSSProperties = { + overflow: 'hidden', + fontSize: '6rem', + position: 'absolute', + top: 'calc(50% - 1em)', + left: 'calc(50% - 1em)', + height: '2em', + width: '2em', + margin: 'auto' +}; + +const targetStyle: CSSProperties = { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + minHeight: '500px', + transition: '.3s ease-out all' +}; + const Demo = () => { const parallax = useParallax(); - const layerBase: CSSProperties = { - position: 'absolute', - height: '100%', - width: '100%', - transition: '.3s ease-out all' - }; - const layer0 = { ...layerBase, transform: `translateX(${parallax.value.tilt * 10}px) translateY(${parallax.value.roll * 10}px)` @@ -44,30 +68,6 @@ const Demo = () => { transform: `rotateX(${parallax.value.roll * 20}deg) rotateY(${parallax.value.tilt * 20}deg)` }; - const containerStyle: CSSProperties = { - margin: '3em auto', - perspective: '200px' - }; - - const cardContentStyle: CSSProperties = { - overflow: 'hidden', - fontSize: '6rem', - position: 'absolute', - top: 'calc(50% - 1em)', - left: 'calc(50% - 1em)', - height: '2em', - width: '2em', - margin: 'auto' - }; - - const targetStyle: CSSProperties = { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - minHeight: '500px', - transition: '.3s ease-out all' - }; - return ( 
diff --git a/src/hooks/useScroll/useScroll.demo.tsx b/src/hooks/useScroll/useScroll.demo.tsx
index 95358229..c7e2e44e 100644
--- a/src/hooks/useScroll/useScroll.demo.tsx
+++ b/src/hooks/useScroll/useScroll.demo.tsx
@@ -1,146 +1,92 @@
-import type { CSSProperties } from 'react';
+import { useState, type CSSProperties } from 'react';
 
-import { register } from 'node:module';
+import { useScroll, UseScrollCallbackParams } from './useScroll';
+import { useDebounceCallback } from '../useDebounceCallback/useDebounceCallback';
 
-import { useField } from '../useField/useField';
-import { useToggle } from '../useToggle/useToggle';
-import { useScroll } from './useScroll';
+const container: CSSProperties = {
+  width: '100%',
+  height: '300px',
+  overflow: 'scroll',
+  backgroundColor: 'rgba(128, 128, 128, 0.05)',
+  borderRadius: '8px'
+}
 
-const styles: Record = {
-  container: {
-    width: '300px',
-    height: '300px',
-    overflow: 'scroll',
-    backgroundColor: 'rgba(128, 128, 128, 0.05)',
-    borderRadius: '8px'
-  },
-  inner: {
-    width: '500px',
-    height: '400px',
-    position: 'relative'
-  },
-  topLeft: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    backgroundColor: 'rgba(128, 128, 128, 0.05)',
-    padding: '4px 8px'
-  },
-  bottomLeft: {
-    position: 'absolute',
-    left: 0,
-    bottom: 0,
-    backgroundColor: 'rgba(128, 128, 128, 0.05)',
-    padding: '4px 8px'
-  },
-  topRight: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    backgroundColor: 'rgba(128, 128, 128, 0.05)',
-    padding: '4px 8px'
-  },
-  bottomRight: {
-    position: 'absolute',
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'rgba(128, 128, 128, 0.05)',
-    padding: '4px 8px'
-  },
-  center: {
-    position: 'absolute',
-    left: '33.33%',
-    top: '33.33%',
-    backgroundColor: 'rgba(128, 128, 128, 0.05)',
-    padding: '4px 8px'
-  },
-  containerInfo: {
-    width: 280,
-    margin: 'auto',
-    paddingLeft: '1rem',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 5
-  }
-};
+const inner: CSSProperties = {
+  width: '500px',
+  height: '400px',
+  position: 'relative'
+}
 
-const Demo = () => {
-  const xInput = useField({ initialValue: 0 });
-  const yInput = useField({ initialValue: 0 });
-  const [behavior, setBehavior] = useToggle(['auto', 'smooth']);
+const topLeft: CSSProperties = {
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  backgroundColor: 'rgba(128, 128, 128, 0.05)',
+  padding: '4px 8px'
+}
 
-  const scrollX = xInput.watch();
-  const scrollY = yInput.watch();
+const bottomLeft: CSSProperties = {
+  position: 'absolute',
+  left: 0,
+  bottom: 0,
+  backgroundColor: 'rgba(128, 128, 128, 0.05)',
+  padding: '4px 8px'
+}
 
-  const scroll = useScroll({
-    x: scrollX,
-    y: scrollY,
-    behavior,
-    onScroll: (event) => {
-      console.log('onScroll', event);
-    }
-  });
+const topRight: CSSProperties = {
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  backgroundColor: 'rgba(128, 128, 128, 0.05)',
+  padding: '4px 8px'
+}
 
-  return (
-    

-      

-        

-          

-            x:
-            
-          

-          

-            y:
-            
-          

-        

-        

-          

-            Smooth scrolling:{' '}
-             setBehavior(event.target.checked ? 'smooth' : 'auto')}
-            />
-          

-          
scrolling: {String(scroll.scrolling)}

-        

-      

+const bottomRight: CSSProperties = {
+  position: 'absolute',
+  right: 0,
+  bottom: 0,
+  backgroundColor: 'rgba(128, 128, 128, 0.05)',
+  padding: '4px 8px'
+}
 
+const center: CSSProperties = {
+  position: 'absolute',
+  left: '33.33%',
+  top: '33.33%',
+  backgroundColor: 'rgba(128, 128, 128, 0.05)',
+  padding: '4px 8px'
+}
 
-      

-        

-          

-            
TopLeft

-            
BottomLeft

-            
TopRight

-            
BottomRight

-            
Scroll Me

-          

-        

+const info: CSSProperties = { display: 'flex', justifyContent: 'center', flexDirection: 'column', width: '100%', alignItems: 'center' }
+
+const Demo = () => {
+  const [scroll, setScroll] = useState({ x: 0, y: 0 });
+
+  const debouncedScrollCallback = useDebounceCallback((params: UseScrollCallbackParams) => setScroll({ x: Math.floor(params.x), y: Math.floor(params.y) }), 100);
+  const [scrollRef, scrolling] = useScroll(debouncedScrollCallback);
 
-        

-          

-            
Arrived

-            

-              
top: {String(scroll.arrived.top)}

-              
right: {String(scroll.arrived.right)}

-              
bottom: {String(scroll.arrived.bottom)}

-              
left: {String(scroll.arrived.left)}

-            

+  return (
+    

+      

+        

+          

+            
TopLeft

+            
BottomLeft

+            
TopRight

+            
BottomRight

+            
Scroll Me

           

+        

 
-          

-            
Directions

-            

-              
top: {String(scroll.directions.top)}

-              
right: {String(scroll.directions.right)}

-              
bottom: {String(scroll.directions.bottom)}

-              
left: {String(scroll.directions.left)}

-            

+        

+          

+            Scroll position:
+            
scrolling: {String(scrolling)}

+            
x: {scroll.x}

+            
y: {scroll.y}

           

         

-      

+      

     

   );
 };
diff --git a/src/hooks/useScroll/useScroll.ts b/src/hooks/useScroll/useScroll.ts
index 57a4a249..a4b74d89 100644
--- a/src/hooks/useScroll/useScroll.ts
+++ b/src/hooks/useScroll/useScroll.ts
@@ -4,18 +4,19 @@ import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 import { getElement, isTarget } from '@/utils/helpers';
 
-interface UseScrollOptions {
-  /** Behavior of scrolling */
-  behavior?: ScrollBehavior;
-
-  /**  Listener options for scroll event. */
-  eventListenerOptions?: boolean | AddEventListenerOptions;
+const ARRIVED_STATE_THRESHOLD_PIXELS = 1;
 
-  /** The check time when scrolling ends. */
-  idle?: number;
+/** The use scroll target element type */
+export type UseScrollTarget =
+  | string
+  | Document
+  | Element
+  | RefObject
+  | Window;
 
-  /** Throttle time for scroll event, it’s disabled by default. */
-  throttle?: number;
+export interface UseScrollOptions {
+  /** Behavior of scrolling */
+  behavior?: ScrollBehavior;
 
   /** The initial x position. */
   x?: number;
@@ -23,14 +24,11 @@ interface UseScrollOptions {
   /** The initial y position. */
   y?: number;
 
-  /** On error callback. */
-  onError?: (error: unknown) => void;
-
-  /** Trigger it when scrolling. */
-  onScroll?: (e: Event) => void;
+  //* The on scroll callback */
+  onScroll?: (params: UseScrollCallbackParams, event: Event) => void;
 
-  /** Trigger it when scrolling ends. */
-  onStop?: (e: Event) => void;
+  //* The on end scroll callback */
+  onStop?: (event: Event) => void;
 
   /** Offset arrived states by x pixels. */
   offset?: {
@@ -41,9 +39,7 @@ interface UseScrollOptions {
   };
 }
 
-interface UseScrollReturn {
-  /** State of scrolling */
-  scrolling: boolean;
+export interface UseScrollCallbackParams {
   /** The element x position */
   x: number;
   /** The element y position */
@@ -64,22 +60,23 @@ interface UseScrollReturn {
   };
 }
 
-/** The use scroll target element type */
-export type UseScrollTarget =
-  | (() => Element)
-  | string
-  | Document
-  | Element
-  | RefObject
-  | Window;
-
 export interface UseScroll {
-  (target: Target, options?: UseScrollOptions): UseScrollReturn;
+  (
+    target: Target,
+    callback?: (params: UseScrollCallbackParams, event: Event) => void
+  ): boolean;
+
+  (target: Target, options?: UseScrollOptions): boolean;
+
+  (
+    callback?: (params: UseScrollCallbackParams, event: Event) => void,
+    target?: never
+  ): [(node: Target) => void, boolean];
 
   (
     options?: UseScrollOptions,
     target?: never
-  ): { ref: (node: Target) => void } & UseScrollReturn;
+  ): [(node: Target) => void, boolean];
 }
 
 /**
@@ -87,43 +84,77 @@ export interface UseScroll {
  * @description - Hook that allows you to control scroll a element
  * @category Sensors
  *
- * @param {RefObject} ref - React ref object pointing to a scrollable element.
- * @param {UseScrollOptions} [options] - Optional configuration options for the hook.
- * @returns {useScrollReturn} An object containing the current scroll position, scrolling state, and scroll direction.
+ * @overload
+ * @template Target The target element(s)
+ * @param {number} [options.x] The initial x position
+ * @param {number} [options.y] The initial y position
+ * @param {ScrollBehavior} [options.behavior] The behavior of scrolling
+ * @param {number} [options.offset.left] The left offset for arrived states
+ * @param {number} [options.offset.right]  The right offset for arrived states
+ * @param {number} [options.offset.top] The top offset for arrived states
+ * @param {number} [options.offset.bottom] The bottom offset for arrived states
+ * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll
+ * @param {(e: Event) => void} [options.onStop] The callback function to be invoked on scroll end
+ * @returns {boolean} The state of scrolling
+ *
+ * @example
+ * const scrolling = useScroll(ref, options);
+ *
+ * @overload
+ * @template Target The target element(s)
+ * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll
+ * @returns {boolean} The state of scrolling
+ *
+ * @example
+ * const scrolling = useScroll(ref, () => console.log('callback'));
+ *
+ * @overload
+ * @template Target The target element(s)
+ * @param {Target} target The target element(s) to detect outside clicks for
+ * @param {number} [options.x] The initial x position
+ * @param {number} [options.y] The initial y position
+ * @param {ScrollBehavior} [options.behavior] The behavior of scrolling
+ * @param {number} [options.offset.left] The left offset for arrived states
+ * @param {number} [options.offset.right]  The right offset for arrived states
+ * @param {number} [options.offset.top] The top offset for arrived states
+ * @param {number} [options.offset.bottom] The bottom offset for arrived states
+ * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll
+ * @param {(e: Event) => void} [options.onStop] The callback function to be invoked on scroll end
+ * @returns {[(node: Target) => void, boolean]} The state of scrolling
+ *
+ * @example
+ * const [ref, scrolling] = useScroll(options);
+ *
+ * @overload
+ * @template Target The target element(s)
+ * @param {Target} target The target element(s) to detect outside clicks for
+ * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll
+ * @returns {[(node: Target) => void, boolean]} The state of scrolling
  *
  * @example
- * const { x, y, isScrolling, arrivedState, directions } = useScroll(ref);
+ * const [ref, scrolling] = useScroll(() => console.log('callback'));
  */
-const ARRIVED_STATE_THRESHOLD_PIXELS = 1;
-
 export const useScroll = ((...params: any[]) => {
   const target = (isTarget(params[0]) ? params[0] : undefined) as UseScrollTarget | undefined;
-  const options = (target ? params[1] : params[0]) as UseScrollOptions | undefined;
+  console.log('target', target);
+  const options = (
+    target
+      ? typeof params[1] === 'object'
+        ? params[1]
+        : { onScroll: params[1] }
+      : typeof params[0] === 'object'
+        ? params[0]
+        : { onScroll: params[0] }
+  ) as UseScrollOptions | undefined;
+
   const [internalRef, setInternalRef] = useState();
   const internalOptionsRef = useRef(options);
   internalOptionsRef.current = options;
 
   const { x = 0, y = 0, behavior = 'auto' } = options ?? {};
 
-  const [scroll, setScroll] = useState({
-    x,
-    y,
-    arrived: {
-      left: true,
-      right: false,
-      top: true,
-      bottom: false
-    },
-    directions: {
-      left: false,
-      right: false,
-      top: false,
-      bottom: false
-    }
-  });
-
   const [scrolling, setScrolling] = useState(false);
-  const lastScrollTime = useRef(Date.now());
+  const scrollPositionRef = useRef({ x, y });
 
   useLayoutEffect(() => {
     if (!target && !internalRef) return;
@@ -136,18 +167,7 @@ export const useScroll = ((...params: any[]) => {
       top: y,
       behavior
     });
-  }, [x, y]);
-
-  // const onScrollEnd = DebounceFn((e: Event) => {
-  //   const currentTime = Date.now();
-  //   if (currentTime - lastScrollTime.current >= idle) {
-  //     setIsScrolling(false);
-  //     setDirections({ left: false, right: false, top: false, bottom: false });
-  //     onStop(e);
-  //   }
-  // }, throttle + idle);
-
-  // const throttleOnScroll = throttle(onScrollHandler, throttle);
+  }, []);
 
   useEffect(() => {
     if (!target && !internalRef) return;
@@ -157,67 +177,54 @@ export const useScroll = ((...params: any[]) => {
 
     const onScrollEnd = (event: Event) => {
       setScrolling(false);
-      setScroll((prevScroll) => ({
-        ...prevScroll,
-        directions: {
-          left: false,
-          right: false,
-          top: false,
-          bottom: false
-        }
-      }));
       options?.onStop?.(event);
     };
 
     const onScroll = (event: Event) => {
-      try {
-        const target = (
-          event.target === document ? (event.target as Document).documentElement : event.target
-        ) as HTMLElement;
-
-        const { display, flexDirection, direction } = target.style;
-        const directionMultipler = direction === 'rtl' ? -1 : 1;
-
-        const scrollLeft = target.scrollLeft;
-        let scrollTop = target.scrollTop;
-        if (target === window.document && !scrollTop) scrollTop = window.document.body.scrollTop;
-
-        const offset = internalOptionsRef.current?.offset;
-        const left = scrollLeft * directionMultipler <= (offset?.left ?? 0);
-        const right =
-          scrollLeft * directionMultipler + target.clientWidth >=
-          target.scrollWidth - (offset?.right ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
-        const top = scrollTop <= (offset?.top ?? 0);
-        const bottom =
-          scrollTop + target.clientHeight >=
-          target.scrollHeight - (offset?.bottom ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
-
-        const isColumnReverse = display === 'flex' && flexDirection === 'column-reverse';
-        const isRowReverse = display === 'flex' && flexDirection === 'column-reverse';
-
-        setScrolling(true);
-        setScroll((prevScroll) => ({
-          x: scrollLeft,
-          y: scrollTop,
-          directions: {
-            left: scrollLeft < prevScroll.x,
-            right: scrollLeft > prevScroll.x,
-            top: scrollTop < prevScroll.y,
-            bottom: scrollTop > prevScroll.y
-          },
-          arrived: {
-            left: isRowReverse ? right : left,
-            right: isRowReverse ? left : right,
-            top: isColumnReverse ? bottom : top,
-            bottom: isColumnReverse ? top : bottom
-          }
-        }));
-
-        lastScrollTime.current = Date.now();
-        internalOptionsRef.current?.onScroll?.(event);
-      } catch (error) {
-        internalOptionsRef.current?.onError?.(error);
-      }
+      setScrolling(true);
+      const target = (
+        event.target === document ? (event.target as Document).documentElement : event.target
+      ) as HTMLElement;
+
+      const { display, flexDirection, direction } = target.style;
+      const directionMultiplier = direction === 'rtl' ? -1 : 1;
+
+      const scrollLeft = target.scrollLeft;
+      let scrollTop = target.scrollTop;
+      if (target instanceof Document && !scrollTop) scrollTop = window.document.body.scrollTop;
+
+      const offset = internalOptionsRef.current?.offset;
+      const left = scrollLeft * directionMultiplier <= (offset?.left ?? 0);
+      const right =
+        scrollLeft * directionMultiplier + target.clientWidth >=
+        target.scrollWidth - (offset?.right ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+      const top = scrollTop <= (offset?.top ?? 0);
+      const bottom =
+        scrollTop + target.clientHeight >=
+        target.scrollHeight - (offset?.bottom ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+
+      const isColumnReverse = display === 'flex' && flexDirection === 'column-reverse';
+      const isRowReverse = display === 'flex' && flexDirection === 'column-reverse';
+
+      const params = {
+        x: scrollLeft,
+        y: scrollTop,
+        directions: {
+          left: scrollLeft < scrollPositionRef.current.x,
+          right: scrollLeft > scrollPositionRef.current.x,
+          top: scrollTop < scrollPositionRef.current.y,
+          bottom: scrollTop > scrollPositionRef.current.y
+        },
+        arrived: {
+          left: isRowReverse ? right : left,
+          right: isRowReverse ? left : right,
+          top: isColumnReverse ? bottom : top,
+          bottom: isColumnReverse ? top : bottom
+        }
+      };
+
+      scrollPositionRef.current = { x: scrollLeft, y: scrollTop };
+      internalOptionsRef.current?.onScroll?.(params, event);
     };
 
     element.addEventListener('scroll', onScroll);
@@ -229,6 +236,6 @@ export const useScroll = ((...params: any[]) => {
     };
   }, [target, internalRef]);
 
-  if (target) return { ...scroll, scrolling };
-  return { ref: setInternalRef, ...scroll, scrolling };
+  if (target) return scrolling;
+  return [setInternalRef, scrolling];
 }) as UseScroll;
diff --git a/src/utils/helpers/isTarget.ts b/src/utils/helpers/isTarget.ts
index 33b15c11..d3ebecee 100644
--- a/src/utils/helpers/isTarget.ts
+++ b/src/utils/helpers/isTarget.ts
@@ -1,5 +1,4 @@
 export const isTarget = (target: any) =>
-  typeof target === 'function' ||
   typeof target === 'string' ||
   target instanceof Element ||
   target instanceof Window ||