Hooks

useInfiniteScroll

Automatically load more content when the user scrolls near the bottom of a container. Returns a Svelte action to attach to the scrollable element.

Basic Usage

Scroll to the bottom of the list to load 10 more items.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Loaded: 10 items Page 1 
<script lang="ts">
  import { Badge } from 'sv5ui';
  import { useInfiniteScroll } from 'sv5ui';

  let items = $state(Array.from({ length: 10 }, (_, i) => `Item ${i + 1}`));
  let page = $state(1);

  async function onLoad() {
    await new Promise((resolve) => setTimeout(resolve, 800));
    page += 1;
    const newItems = Array.from({ length: 10 }, (_, i) => `Item ${(page - 1) * 10 + i + 1}`);
    items = [...items, ...newItems];
  }

  const { action: infiniteScroll, loading } = useInfiniteScroll({ onLoad });
</script>

<div use:infiniteScroll class="max-h-64 overflow-y-auto rounded-lg border p-3">
  {#each items as item (item)}
    <div class="rounded-md bg-surface-container px-3 py-2 text-sm">{item}</div>
  {/each}
  {#if loading}
    <Badge label="Loading..." variant="soft" color="primary" size="xs" />
  {/if}
</div>
<p>Loaded: {items.length} items · Page {page}</p>

Custom Threshold

Set threshold to control how far from the bottom loading is triggered.

Configure the threshold in pixels. A higher value triggers loading earlier.

const infiniteScroll = useInfiniteScroll({ onLoad, threshold: 200 });
<script lang="ts">
  import { useInfiniteScroll } from 'sv5ui';

  // Trigger loading 200px before reaching the bottom
  const { action, loading } = useInfiniteScroll({
    onLoad: fetchMore,
    threshold: 200,
    enabled: () => hasMore
  });
</script>

<div use:action class="max-h-96 overflow-y-auto">
  <!-- your list items -->
</div>

Options

OptionTypeDefault
onLoad() => Promise<void> | void-
thresholdnumber100
enabledbooleantrue

Return Values

NameTypeDefault
loadingboolean-
actionSvelte action-
useEscapeKeydown useFormField