svs

svelte-virtual-scroll-list

Virtualized scrolling for big lists

Showing:

Popularity

Downloads/wk

52

GitHub Stars

9

Maintenance

Last Commit

2mos ago

Contributors

0

Package

Dependencies

0

License

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

svelte-virtual-scroll-list

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

Binding example

<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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100