svelte-virtual-scroll-list

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-list	svelte-virtual-list	svelte-tiny-virtual-list
handle dynamic size data	+	+	-
scroll methods (to index)	+	-	+
infinity scrolling	two-directional	-	one-directional with another lib
initial scroll position	+	-	+
sticky items	-	-	+
top/bottom slots	+	-	+
reached top/bottom events	+	-	-
document as a list	+	-	-

API

Props

prop	type	default	description
data	object[]	null	Source for list
key	string	id	Unique key for getting data from data
keeps	number	30	Count of rendered items
estimateSize	number	estimateSize	Estimate size of each item, needs for smooth scrollbar
isHorizontal	boolean	false	Scroll direction
pageMode	boolean	false	Let virtual list using global document to scroll through the list
start	number	0	scroll position start index
offset	number	0	scroll position offset
topThreshold	number	0	The threshold to emit top event, attention to multiple calls.
bottomThreshold	number	0	The 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>

method	arguments	description
scrollToBottom	none	Scroll list to bottom
scrollToIndex	index: number	Set scroll position to a designated index
scrollToOffset	offset: number	Set scroll position to a designated offset
getSize	id: typeof props.key	Get the designated item size
getSizes	none	Get the total number of stored (rendered) items
getOffset	none	Get current scroll offset
getClientSize	none	Get wrapper element client viewport size (width or height)
getScrollSize	none	Get all scroll size (scrollHeight or scrollWidth)
updatePageModeFront	none	When using page mode and virtual list root element offsetTop or offsetLeft change, you need call this method manually

Events

event	description
scroll	Scroll event
top	Top of the list reached
bottom	Bottom of the list reached

Additional

Get index of current rendering items

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