1.3.0 • Published 10 months ago
svelte-virtual-scroll-list v1.3.0
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
<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>