1.1.3 • Published 3 years ago

@chrrubin/svelte-virtual-scroll-list v1.1.3

Weekly downloads
-
License
-
Repository
github
Last release
3 years ago

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

npm

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

svelte-virtual-scroll-listsvelte-virtual-listsvelte-tiny-virtual-list
handle dynamic size data++-
scroll methods (to index)+-+
infinity scrollingtwo-directional-one-directional with another lib
initial scroll position+-+
sticky items--+
top/bottom slots+-+
reached top/bottom events+--
document as a list+--

API

Props

proptypedefaultdescription
dataobject[]nullSource for list
keystringidUnique key for getting data from data
keepsnumber30Count of rendered items
estimateSizenumberestimateSizeEstimate size of each item, needs for smooth scrollbar
isHorizontalbooleanfalseScroll direction
pageModebooleanfalseLet virtual list using global document to scroll through the list
startnumber0scroll position start index
offsetnumber0scroll position offset
topThresholdnumber0The threshold to emit top event, attention to multiple calls.
bottomThresholdnumber0The threshold to emit bottom event, attention to multiple calls.

Methods

Access to methods by component binding

<script>
    let vs
</script>

<VirtualScroll bind:this={vs}></VirtualScroll>
<button on:click={vs.scrollToBottom}>To bottom</button>
methodargumentsdescription
scrollToBottomnoneScroll list to bottom
scrollToIndexindex: numberSet scroll position to a designated index
scrollToOffsetoffset: numberSet scroll position to a designated offset
getSizeid: typeof props.keyGet the designated item size
getSizesnoneGet the total number of stored (rendered) items
getOffsetnoneGet current scroll offset
getClientSizenoneGet wrapper element client viewport size (width or height)
getScrollSizenoneGet all scroll size (scrollHeight or scrollWidth)
updatePageModeFrontnoneWhen using page mode and virtual list root element offsetTop or offsetLeft change, you need call this method manually

Events

eventdescription
scrollScroll event
topTop of the list reached
bottomBottom of the list reached