---
title: "useInfiniteScrollBinding"
description: "A Vue composable wrapping VueUse useInfiniteScroll, adding a reactive canLoadMore guard so you control exactly when more items are fetched."
canonical_url: "https://core.mhaibaraai.cn/en/docs/composables/use-infinite-scroll-binding"
---
# useInfiniteScrollBinding

> A Vue composable wrapping VueUse useInfiniteScroll, adding a reactive canLoadMore guard so you control exactly when more items are fetched.

## Usage

`useInfiniteScrollBinding` builds on top of VueUse's [`useInfiniteScroll`](https://vueuse.org/core/useInfiniteScroll/) with two improvements:

1. `canLoadMore` accepts `MaybeRefOrGetter<boolean>`, so callers can pass a ref or getter directly without writing a `() => ...` closure.
2. The return value passes through `UseInfiniteScrollReturn` (`isLoading` / `reset`) as-is, and explicitly exposes the `direction` / `interval` options.

```vue
<script setup lang="ts">
import { useInfiniteScrollBinding } from '@movk/core'
import { ref, useTemplateRef } from 'vue'

const listRef = useTemplateRef<HTMLElement>('listRef')
const hasMore = ref(true)

async function fetchNextPage() {
  // Load the next page
}

const { isLoading, reset } = useInfiniteScrollBinding(
  () => listRef.value,
  {
    distance: 100,
    canLoadMore: hasMore,
    onLoadMore: fetchNextPage,
  },
)
</script>

<template>
  <div ref="listRef" class="overflow-auto">
    <!-- list items -->
  </div>
</template>
```

> [!WARNING]
> 
> distance
> 
>  is only read once internally by VueUse during initialization; runtime changes have no effect. Therefore, even though the parameter type is 
> 
> MaybeRefOrGetter<number>
> 
> , this is only for caller convenience and does not represent true reactive behavior.

## API

### `useInfiniteScrollBinding(getEl, options)`

### Parameters

**getEl** (`() => HTMLElement | null | undefined`) *required*: A getter that returns the scroll container element.

**options** (`UseInfiniteScrollBindingOptions`) *required*: Configuration options.

#### `UseInfiniteScrollBindingOptions`

**distance** (`MaybeRefOrGetter<number>`) *required*: The distance threshold (in px) that triggers loading.

**onLoadMore** (`() => void | Promise<void>`) *required*: The callback triggered when the threshold is reached. Supports async.

**canLoadMore** (`MaybeRefOrGetter<boolean>`): Whether loading more is allowed.

**direction** (`'top' | 'bottom' | 'left' | 'right'`): The scroll direction that triggers loading.

**interval** (`number`): The minimum interval between two triggers (in ms).

### Returns

**isLoading** (`ComputedRef<boolean>`): The loading state managed internally by VueUse.

**reset** (`() => void`): Resets the internal state, useful for re-enabling infinite scroll when the data source changes.

## Changelog

See commit history for [src/composables/useInfiniteScrollBinding.ts](https://github.com/mhaibaraai/movk-core/commits/main/src/composables/useInfiniteScrollBinding.ts).

---

- [GitHub](https://github.com/mhaibaraai/movk-core/blob/main/src/composables/useInfiniteScrollBinding.ts)


## Sitemap

See the full [sitemap](https://core.mhaibaraai.cn/sitemap.md) for all pages.