feat: add useScroller

src/composition/use-scroller.ts

@@ -0,0 +1,14 @@
+import { Ref, ref, onMounted } from 'vue';
+import { getScroller } from '../utils/dom/scroll';
+
+export function useScroller(el: Ref<HTMLElement>) {
+  const scrollerRef = ref();
+
+  onMounted(() => {
+    if (el.value) {
+      scrollerRef.value = getScroller(el.value);
+    }
+  });
+
+  return scrollerRef;
+}

src/list/index.js

@@ -10,10 +10,10 @@ import {
 // Utils
 import { createNamespace } from '../utils';
 import { isHidden } from '../utils/dom/style';
-import { getScroller } from '../utils/dom/scroll';
 
 // Composition
 import { useRect } from '../composition/use-rect';
+import { useScroller } from '../composition/use-scroller';
 import { useGlobalEvent } from '../composition/use-global-event';
 
 // Components
@@ -49,8 +49,8 @@ export default createComponent({
     // use sync innerLoading state to avoid repeated loading in some edge cases
     const loading = ref(false);
     const rootRef = ref();
-    const scrollerRef = ref();
     const placeholderRef = ref();
+    const scroller = useScroller(rootRef);
 
     const check = () => {
       nextTick(() => {
@@ -58,16 +58,15 @@ export default createComponent({
           return;
         }
 
-        const scroller = scrollerRef.value;
         const { offset, direction } = props;
         let scrollerRect;
 
-        if (scroller.getBoundingClientRect) {
+        if (scroller.value.getBoundingClientRect) {
-          scrollerRect = scroller.getBoundingClientRect();
+          scrollerRect = scroller.value.getBoundingClientRect();
         } else {
           scrollerRect = {
             top: 0,
-            bottom: scroller.innerHeight,
+            bottom: scroller.value.innerHeight,
           };
         }
 
@@ -143,14 +142,12 @@ export default createComponent({
     });
 
     onMounted(() => {
-      scrollerRef.value = getScroller(rootRef.value);
-
       if (props.immediateCheck) {
         check();
       }
     });
 
-    useGlobalEvent(scrollerRef, 'scroll', check);
+    useGlobalEvent(scroller, 'scroll', check);
 
     // @exposed-api
     const vm = getCurrentInstance().proxy;

src/sticky/index.js

@@ -1,12 +1,13 @@
-import { ref, reactive, computed, onMounted } from 'vue';
+import { ref, reactive, computed } from 'vue';
 
 // Utils
 import { isHidden } from '../utils/dom/style';
 import { unitToPx } from '../utils/format/unit';
 import { createNamespace } from '../utils';
-import { getScrollTop, getElementTop, getScroller } from '../utils/dom/scroll';
+import { getScrollTop, getElementTop } from '../utils/dom/scroll';
 
 // Composition
+import { useScroller } from '../composition/use-scroller';
 import { useGlobalEvent } from '../composition/use-global-event';
 import { useVisibilityChange } from '../composition/use-visibility-change';
 
@@ -26,7 +27,7 @@ export default createComponent({
 
   setup(props, { emit, slots }) {
     const rootRef = ref();
-    const scrollerRef = ref();
+    const scroller = useScroller(rootRef);
 
     const state = reactive({
       fixed: false,
@@ -100,11 +101,7 @@ export default createComponent({
       emitScrollEvent(scrollTop);
     };
 
-    onMounted(() => {
+    useGlobalEvent(scroller, 'scroll', onScroll);
-      scrollerRef.value = getScroller(rootRef.value);
-    });
-
-    useGlobalEvent(scrollerRef, 'scroll', onScroll);
     useVisibilityChange(rootRef, onScroll);
 
     return () => {