# Infinite Scroll
> Load more data automatically as users scroll near the end of the list.
**Source:** [https://virtuallist.svelte.page/docs/infinite-scroll](https://virtuallist.svelte.page/docs/infinite-scroll)
---
Load more data automatically as users scroll near the end of the list. Perfect for paginated APIs, infinite feeds, and activity logs.
## Interactive Demo
> Live example: [/examples/infinite-scroll](https://virtuallist.svelte.page/examples/infinite-scroll)
## Basic Usage
```svelte
{#snippet renderItem(item)}
{item.text}
{/snippet}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `onLoadMore` | `() => void \| Promise` | - | Callback when more data is needed (supports async) |
| `loadMoreThreshold` | `number` | `20` | Number of items from the end to trigger `onLoadMore` |
| `hasMore` | `boolean` | `true` | Set to `false` when all data has been loaded |
## Behavior
- **Triggers when scrolling near the end** - The callback fires when the user scrolls within `loadMoreThreshold` items of the end.
- **Automatic initial trigger** - If the initial items are below the threshold, `onLoadMore` is called automatically on mount.
- **Prevents concurrent calls** - While `onLoadMore` is running (for async functions), additional calls are prevented.
## Complete Example
Here's a more complete example with loading states and error handling:
```svelte
{#if error}
{error}
{/if}
{#snippet renderItem(item)}
{item.text}
{/snippet}
{#if isLoading}
Loading...
{/if}
```
## Cursor-Based Pagination
For APIs that use cursor-based pagination:
```svelte
{#snippet renderItem(item)}
{item.text}
{/snippet}
```
## Integration Guides
For real-world integrations with backend services:
- [Infinite Scroll with Convex](/docs/convex) - Real-time data + pagination with Convex backend