feat(useInfiniteScroll): add the canLoadMore option (#3558)

packages/core/useInfiniteScroll/index.ts

@@ -7,7 +7,9 @@ import type { UseScrollOptions } from '../useScroll'
 import { useScroll } from '../useScroll'
 import { resolveElement } from '../_resolve-element'
 
-export interface UseInfiniteScrollOptions extends UseScrollOptions {
+type InfiniteScrollElement = HTMLElement | SVGElement | Window | Document | null | undefined
+
+export interface UseInfiniteScrollOptions<T extends InfiniteScrollElement = InfiniteScrollElement> extends UseScrollOptions {
   /**
    * The minimum distance between the bottom of the element and the bottom of the viewport
    *
@@ -28,21 +30,29 @@ export interface UseInfiniteScrollOptions extends UseScrollOptions {
    * @default 100
    */
   interval?: number
+
+  /**
+   * A function that determines whether more content can be loaded for a specific element.
+   * Should return `true` if loading more content is allowed for the given element,
+   * and `false` otherwise.
+   */
+  canLoadMore?: (el: T) => boolean
 }
 
 /**
  * Reactive infinite scroll.
  *
  * @see https://vueuse.org/useInfiniteScroll
  */
-export function useInfiniteScroll(
-  element: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>,
+export function useInfiniteScroll<T extends InfiniteScrollElement>(
+  element: MaybeRefOrGetter<T>,
   onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => Awaitable<void>,
-  options: UseInfiniteScrollOptions = {},
+  options: UseInfiniteScrollOptions<T> = {},
 ) {
   const {
     direction = 'bottom',
     interval = 100,
+    canLoadMore = () => true,
   } = options
 
   const state = reactive(useScroll(
@@ -69,7 +79,7 @@ export function useInfiniteScroll(
   function checkAndLoad() {
     state.measure()
 
-    if (!observedElement.value || !isElementVisible.value)
+    if (!observedElement.value || !isElementVisible.value || !canLoadMore(observedElement.value as T))
       return
 
     const { scrollHeight, clientHeight, scrollWidth, clientWidth } = observedElement.value as HTMLElement