feat(scroll-position): support pass ref object as scroll target (ecomfe#85)

Author: SyMind

packages/scroll-position/docs/demo/useScrollPosition.tsx

@@ -3,7 +3,7 @@ import {useScrollPosition} from '@huse/scroll-position';
 
 export default () => {
     const ref = useRef(null);
-    const position = useScrollPosition(ref.current);
+    const position = useScrollPosition(ref);
     const gradient = 'radial-gradient(circle at 10% 20%, rgb(6, 123, 239) 14.2%, rgb(219, 115, 249) 89.5%)';
     console.log('position---->', position);
     return (

packages/scroll-position/src/__tests__/index.test.js

@@ -1,4 +1,6 @@
+import {useEffect, useRef} from 'react';
 import {renderHook} from '@testing-library/react-hooks';
+import {render} from '@testing-library/react';
 import {useScrollPosition, useScrollLeft, useScrollTop} from '../index';
 
 describe('useScrollPosition', () => {
@@ -7,6 +9,21 @@ describe('useScrollPosition', () => {
         expect(result.current).toEqual({x: 0, y: 0, left: 0, top: 0, scrollLeft: 0, scrollTop: 0});
     });
 
+    test('pass ref', () => {
+        let scroll = null;
+        let ref = null;
+        const Foo = () => {
+            ref = useRef(null);
+            useEffect(() => {
+                ref.current.scrollTop = 10;
+            }, []);
+            scroll = useScrollPosition(ref);
+            return <span ref={ref} id="root" />;
+        };
+        render(<Foo />);
+        expect(scroll).toEqual({x: 0, y: 10, left: 0, top: 10, scrollLeft: 0, scrollTop: 10});
+    });
+
     test('element scroll position', () => {
         const div = document.createElement('div');
         div.scrollTop = 10;

packages/scroll-position/src/index.ts

@@ -1,4 +1,4 @@
-import {useRef, useEffect, useState} from 'react';
+import {useRef, useEffect, useState, MutableRefObject} from 'react';
 import hasPassiveEvent from 'has-passive-events';
 
 export interface ScrollPosition {
@@ -28,18 +28,28 @@ const getScrollPosition = (element: HTMLElement): ScrollPosition => {
     };
 };
 
-export function useScrollPosition(element?: HTMLElement | null): ScrollPosition {
+type Target = MutableRefObject<HTMLElement> | HTMLElement | null;
+
+function getTargetNode(target?: Target): HTMLElement | Document {
+    if (!target) {
+        return document;
+    }
+    if ('current' in target) {
+        return target.current;
+    }
+    return target;
+}
+
+export function useScrollPosition(target?: Target): ScrollPosition {
     const rafTick = useRef(0);
     const [position, setPosition] = useState(INITIAL_POSITION);
     useEffect(
         () => {
-            if (element === null) {
+            if (target === null) {
                 return;
             }
-
-            const target = element ?? document;
-            const targetElement = element ?? document.documentElement;
-
+            const targetNode = getTargetNode(target);
+            const targetElement = targetNode === document ? document.documentElement : targetNode as HTMLElement;
             setPosition(getScrollPosition(targetElement));
 
             const syncScroll = () => {
@@ -54,14 +64,14 @@ export function useScrollPosition(element?: HTMLElement | null): ScrollPosition
                 rafTick.current = requestAnimationFrame(callback);
             };
 
-            target.addEventListener('scroll', syncScroll, EVENT_OPTIONS);
+            targetNode.addEventListener('scroll', syncScroll, EVENT_OPTIONS);
 
             return () => {
-                target.removeEventListener('scroll', syncScroll, EVENT_OPTIONS);
+                targetNode.removeEventListener('scroll', syncScroll, EVENT_OPTIONS);
                 cancelAnimationFrame(rafTick.current);
             };
         },
-        [element]
+        [target]
     );
 
     return position;