@chrrubin/svelte-virtual-scroll-list

svelte-virtual-scroll-list

This is a fork of v1ack's svelte-virtual-scroll-list migrated to TypeScript to add support for TypeScript generics.

Usage

yarn add -D @chrrubin/svelte-virtual-scroll-list

<script lang="ts">
    import VirtualScroll from "@chrrubin/svelte-virtual-scroll-list"

    interface Item {
        id: number;
        text: string;
    }

    let items: Item[] = [{ id: 0, text: 'zero'}, { id: 1, text: 'one'}];
</script>

<VirtualScroll data={items} key="id" let:data>
  <div>{data.id}</div>
  <div>{data.text}<div>
</VirtualScroll>

Original README

Svelte implementation of vue library vue-virtual-scroll-list

Virtualized scrolling for big lists

Support dynamic both-directional lists (see example)

Online demo: https://v1ack.github.io/svelte-virtual-scroll-list/

Simple example in Svelte REPL

Getting started

Installing from npm

npm i svelte-virtual-scroll-list -D

or

yarn add svelte-virtual-scroll-list -D

Using

<script>
    import VirtualScroll from "svelte-virtual-scroll-list"

    let items = [{id: 1, text: "one"}, ...]
</script>
<div class="vs">
    <VirtualScroll
            data={items}
            key="id"
            let:data
    >
        <div slot="header">
            This is a header set via slot
        </div>
        <div>
            {data.text}
        </div>
        <div slot="footer">
            This is a footer set via slot
        </div>
    </VirtualScroll>
</div>

More examples available in example folder

Comparing to other virtualizing components

API

Props

Methods

Access to methods by component binding

<script>
    let vs
</script>

<VirtualScroll bind:this={vs}></VirtualScroll>
<button on:click={vs.scrollToBottom}>To bottom</button>

Events