feat(useInfiniteScroll): new function (#1219)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/core/index.ts

@@ -49,6 +49,7 @@ export * from './useFps'
 export * from './useFullscreen'
 export * from './useGeolocation'
 export * from './useIdle'
+export * from './useInfiniteScroll'
 export * from './useIntersectionObserver'
 export * from './useKeyModifier'
 export * from './useLocalStorage'

packages/core/useInfiniteScroll/demo.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue-demi'
+import { useInfiniteScroll } from '.'
+
+const el = ref<HTMLElement | null>(null)
+const data = ref([1, 2, 3, 4, 5, 6])
+
+useInfiniteScroll(
+  el,
+  () => {
+    const length = data.value.length + 1
+    data.value.push(...Array.from({ length: 5 }, (_, i) => length + i))
+  },
+  { distance: 10 },
+)
+</script>
+
+<template>
+  <div ref="el" class="flex flex-col gap-2 p-4 w-300px h-300px m-auto overflow-scroll bg-gray-500/5 rounded">
+    <div v-for="item in data" :key="item" class="h-30 bg-gray-500/5 rounded p-3">
+      {{ item }}
+    </div>
+  </div>
+</template>

packages/core/useInfiniteScroll/index.md

@@ -0,0 +1,36 @@
+---
+category: Sensors
+---
+
+# useInfiniteScroll
+
+Infinite scrolling of the element. 
+
+## Usage
+
+```html
+<script setup lang="ts">
+import { ref, toRefs } from 'vue'
+import { useInfiniteScroll } from '@vueuse/core'
+
+const el = ref<HTMLElement>(null)
+const data = ref([1,2,3,4,5,6])
+
+useInfiniteScroll(
+  el,
+  () => {
+    // load more
+    data.value.push(...moreData)
+  },
+  { distance: 10 }
+)
+</script>
+
+<template>
+  <div ref="el">
+    <div v-for="item in data">
+      {{ item }}
+    </div>
+  </div>
+</template>
+```

packages/core/useInfiniteScroll/index.ts

@@ -0,0 +1,44 @@
+import type { UnwrapNestedRefs } from 'vue-demi'
+import { reactive, watch } from 'vue-demi'
+import type { MaybeRef } from '@vueuse/shared'
+import type { UseScrollOptions } from '../useScroll'
+import { useScroll } from '../useScroll'
+
+export interface UseInfiniteScrollOptions extends UseScrollOptions {
+  /**
+   * The minimum distance between the bottom of the element and the bottom of the viewport
+   *
+   * @default 0
+   */
+  distance?: number
+}
+
+/**
+ * Reactive infinite scroll.
+ *
+ * @see https://vueuse.org/useInfiniteScroll
+ */
+export function useInfiniteScroll(
+  element: MaybeRef<HTMLElement | SVGElement | Window | Document | null | undefined>,
+  onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void,
+  options: UseInfiniteScrollOptions = {},
+) {
+  const state = reactive(useScroll(
+    element,
+    {
+      ...options,
+      offset: {
+        bottom: options.distance ?? 0,
+        ...options.offset,
+      },
+    },
+  ))
+
+  watch(
+    () => state.arrivedState.bottom,
+    (v) => {
+      if (v)
+        onLoadMore(state)
+    },
+  )
+}