fix(useInfiniteScroll): improve visibility check (#3212)

packages/core/useInfiniteScroll/index.test.ts

@@ -0,0 +1,73 @@
+import { flushPromises } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue-demi'
+import { useElementVisibility } from '../useElementVisibility'
+import { useInfiniteScroll } from '.'
+
+vi.mock('../useElementVisibility')
+describe('useInfiniteScroll', () => {
+  it('should be defined', () => {
+    expect(useInfiniteScroll).toBeDefined()
+  })
+
+  it.each([
+    [ref(givenMockElement())],
+    [givenMockElement()],
+    [document],
+    [window],
+  ])('should calls the loadMore handler, when element is visible', (target) => {
+    const mockHandler = vi.fn()
+    givenElementVisibilityRefMock(true)
+
+    useInfiniteScroll(target, mockHandler)
+
+    expect(mockHandler).toHaveBeenCalledTimes(1)
+  })
+
+  it('should calls the loadMore handler, when element visibility state form hidden to visible', async () => {
+    const mockHandler = vi.fn()
+    const mockElement = givenMockElement()
+    const visibilityRefMock = givenElementVisibilityRefMock(false)
+
+    useInfiniteScroll(mockElement, mockHandler)
+
+    expect(mockHandler).not.toHaveBeenCalled()
+
+    visibilityRefMock.value = true
+    await flushPromises()
+
+    expect(mockHandler).toHaveBeenCalledTimes(1)
+  })
+
+  it('should call the loadMore handler, when user scrolls', async () => {
+    const mockElementScrollHeight = 100
+    const mockHandler = vi.fn()
+    const mockElement = givenMockElement({
+      scrollHeight: mockElementScrollHeight,
+    })
+    givenElementVisibilityRefMock(true)
+
+    useInfiniteScroll(mockElement, mockHandler)
+    mockElement.scrollTop = mockElementScrollHeight
+    mockElement.dispatchEvent(new Event('scroll'))
+    await flushPromises()
+
+    expect(mockHandler).toHaveBeenCalledTimes(1)
+  })
+
+  function givenMockElement({
+    scrollHeight = 0,
+  } = {}): HTMLDivElement {
+    const mockElement = document.createElement('div')
+    Object.defineProperty(mockElement, 'scrollHeight', {
+      value: scrollHeight,
+    })
+    return mockElement
+  }
+
+  function givenElementVisibilityRefMock(defaultValue: boolean) {
+    const mockVisibilityRef = ref(defaultValue)
+    vi.mocked(useElementVisibility).mockReturnValue(mockVisibilityRef)
+    return mockVisibilityRef
+  }
+})

packages/core/useInfiniteScroll/index.ts

@@ -1,7 +1,8 @@
-import { computed, nextTick, reactive, ref, watch } from 'vue-demi'
-import type { UnwrapNestedRefs } from 'vue-demi'
 import type { Awaitable, MaybeRefOrGetter } from '@vueuse/shared'
 import { toValue } from '@vueuse/shared'
+import type { UnwrapNestedRefs } from 'vue-demi'
+import { computed, nextTick, reactive, ref, watch } from 'vue-demi'
+import { useElementVisibility } from '../useElementVisibility'
 import type { UseScrollOptions } from '../useScroll'
 import { useScroll } from '../useScroll'
 
@@ -56,17 +57,29 @@ export function useInfiniteScroll(
 
   const promise = ref<any>()
   const isLoading = computed(() => !!promise.value)
+  // Document and Window cannot be observed by IntersectionObserver
+  const observedElement = computed<HTMLElement | SVGElement | null | undefined>(() => {
+    const el = toValue(element)
+    if (el instanceof Window)
+      return window.document.documentElement
+
+    if (el instanceof Document)
+      return document.documentElement
+
+    return el
+  })
+  const isElementVisible = useElementVisibility(observedElement)
 
   function checkAndLoad() {
     state.measure()
 
-    const el = toValue(element) as HTMLElement
-    if (!el || !el.offsetParent)
+    if (!observedElement.value || !isElementVisible.value)
       return
 
+    const { scrollHeight, clientHeight, scrollWidth, clientWidth } = observedElement.value as HTMLElement
     const isNarrower = (direction === 'bottom' || direction === 'top')
-      ? el.scrollHeight <= el.clientHeight
-      : el.scrollWidth <= el.clientWidth
+      ? scrollHeight <= clientHeight
+      : scrollWidth <= clientWidth
 
     if (state.arrivedState[direction] || isNarrower) {
       if (!promise.value) {
@@ -83,7 +96,7 @@ export function useInfiniteScroll(
   }
 
   watch(
-    () => [state.arrivedState[direction], toValue(element)],
+    () => [state.arrivedState[direction], isElementVisible.value],
     checkAndLoad,
     { immediate: true },
   )