@adofai-gg/svelte-virtualized-infinite-scroll NPM

Svelte Virtualized Infinite Scroll

Virtualized infinite scroll component for Svelte.

Features

Custom scroll elements
Variable heights

Installation

yarn add @adofai-gg/svelte-virtualized-infinite-scroll

Usage

<script lang="ts">
  import VirtualizedScroll from "@adofai-gg/svelte-virtualized-infinite-scroll";

  let totalCount = 100000;

  let data = [
    /*...*/
  ];

  const loadMore = () => {
    // ...
  };

  let scrollContainer: HTMLElement;
</script>
<div bind:this={scrollContainer}>
    <VirtualizedScroll {data} itemHeight={100} let:item on:more={(e) => loadMore(e.detail.offset)} total={totalCount} {scrollContainer}>
        <div>
            {item.something}
        </div>
    </VirtualizedScroll>
</div>

Reference

Props

Prop	Type	Description
data	Array	The array of data for the list
gap	number	The spacing between the elements
scrollContainer	HTMLElement	The element to capture scroll
threshold	number	`more` event is called when the rest rest items are less then this value(default: 10)