Svelte Virtual Scroll List
Virtualized scrolling for big lists
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/
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>
