fix(useInfiniteScroll): re-measure arrived states when async infinite…

… scroll resolves (#3030)
vueuse · May 1, 2023 · a88fea2 · a88fea2
1 parent e83a3dc
commit a88fea2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/packages/core/useInfiniteScroll/index.ts b/packages/core/useInfiniteScroll/index.ts
@@ -58,6 +58,8 @@ export function useInfiniteScroll(
   const isLoading = computed(() => !!promise.value)
 
   function checkAndLoad() {
+    state.measure()
+
     const el = toValue(element) as HTMLElement
     if (!el)
       return

diff --git a/packages/core/useScroll/index.ts b/packages/core/useScroll/index.ts
@@ -160,20 +160,20 @@ export function useScroll(
   }
   const onScrollEndDebounced = useDebounceFn(onScrollEnd, throttle + idle)
 
-  const onScrollHandler = (e: Event) => {
-    const eventTarget = (
-      e.target === document ? (e.target as Document).documentElement : e.target
+  const setArrivedState = (target: HTMLElement | SVGElement | Window | Document | null | undefined) => {
+    const el = (
+      target === document ? (target as Document).documentElement : target
     ) as HTMLElement
 
-    const { display, flexDirection } = getComputedStyle(eventTarget)
+    const { display, flexDirection } = getComputedStyle(el)
 
-    const scrollLeft = eventTarget.scrollLeft
+    const scrollLeft = el.scrollLeft
     directions.left = scrollLeft < internalX.value
     directions.right = scrollLeft > internalX.value
 
     const left = Math.abs(scrollLeft) <= 0 + (offset.left || 0)
     const right = Math.abs(scrollLeft)
-      + eventTarget.clientWidth >= eventTarget.scrollWidth
+      + el.clientWidth >= el.scrollWidth
       - (offset.right || 0)
       - ARRIVED_STATE_THRESHOLD_PIXELS
 
@@ -188,17 +188,17 @@ export function useScroll(
 
     internalX.value = scrollLeft
 
-    let scrollTop = eventTarget.scrollTop
+    let scrollTop = el.scrollTop
 
     // patch for mobile compatible
-    if (e.target === document && !scrollTop)
+    if (target === document && !scrollTop)
       scrollTop = document.body.scrollTop
 
     directions.top = scrollTop < internalY.value
     directions.bottom = scrollTop > internalY.value
     const top = Math.abs(scrollTop) <= 0 + (offset.top || 0)
     const bottom = Math.abs(scrollTop)
-      + eventTarget.clientHeight >= eventTarget.scrollHeight
+      + el.clientHeight >= el.scrollHeight
       - (offset.bottom || 0)
       - ARRIVED_STATE_THRESHOLD_PIXELS
 
@@ -216,6 +216,14 @@ export function useScroll(
     }
 
     internalY.value = scrollTop
+  }
+
+  const onScrollHandler = (e: Event) => {
+    const eventTarget = (
+      e.target === document ? (e.target as Document).documentElement : e.target
+    ) as HTMLElement
+
+    setArrivedState(eventTarget)
 
     isScrolling.value = true
     onScrollEndDebounced(e)
@@ -242,6 +250,12 @@ export function useScroll(
     isScrolling,
     arrivedState,
     directions,
+    measure() {
+      const _element = toValue(element)
+
+      if (_element)
+        setArrivedState(_element)
+    },
   }
 }