infinite-scroll-svelte v0.3.6

infinite-scroll-svelte

Wrapper that fires events when the user has scrolled it to the beginning or end

Important

• All set keys inside <InfiniteScroll /> must be unique, otherwise auto-scrolling will not work

• onPrev and onNext will block the event handler until one of the them completes.

• First and last elements are temporarily marked with [data-infinite-scroll-xxxxx] identifiers for internal work, so only sequence elements should be inside <InfiniteScroll>:

Incorrect

<InfiniteScroll>
	<h1>Title</h1>
	{#each items as item (item)}
		{item}
	{/each}
</InfiniteScroll>

Correct

<SomeWrapper>
	<h1>Title</h1>
	<InfiniteScroll>
		{#each items as item (item)}
			{item}
		{/each}
	</InfiniteScroll>
</SomeWrapper>

Props

Example

<script lang="ts">
	import { InfiniteScroll } from 'infinite-scroll-svelte';

	const items = $state<number[]>([...Array(100).keys()]);
	const handleNext = async () => items.push(Math.random());
</script>

<InfiniteScroll class="size-64 border-2 border-current" throttleInMs={50} onNext={handleNext}>
	{#each items as item (item)}
		<div>{item}</div>
	{/each}
</InfiniteScroll>