# @chrrubin/svelte-virtual-scroll-list

> Svelte lib for virtualizing lists

Latest version **1.1.3** (published 2021-11-13) · 0 weekly downloads

## Install

```sh
npm install @chrrubin/svelte-virtual-scroll-list
pnpm add @chrrubin/svelte-virtual-scroll-list
yarn add @chrrubin/svelte-virtual-scroll-list
bun add @chrrubin/svelte-virtual-scroll-list
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2021-11-13 |
| First published | 2021-11-13 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 82.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | ChrRubin |
| Maintainers | chrrubin |
| Keywords | svelte, virtual, virtual-list, virtual-scroll |

## Links

- npm: https://www.npmjs.com/package/@chrrubin/svelte-virtual-scroll-list
- Repository: https://github.com/chrrubin/svelte-virtual-scroll-list
- Homepage: https://github.com/chrrubin/svelte-virtual-scroll-list#readme
- Issues: https://github.com/chrrubin/svelte-virtual-scroll-list/issues
- npm.io page: https://npm.io/package/@chrrubin/svelte-virtual-scroll-list

## Recent versions

- 1.1.3 (latest) — 2021-11-13
- 1.1.2 — 2021-11-13
- 1.1.1 — 2021-11-13
- 1.1.0 — 2021-11-13

## README

# svelte-virtual-scroll-list

This is a fork of [v1ack](https://github.com/v1ack)'s [svelte-virtual-scroll-list](https://github.com/v1ack/svelte-virtual-scroll-list) migrated to TypeScript to add support for TypeScript generics.

## Usage

`yarn add -D @chrrubin/svelte-virtual-scroll-list`

```svelte
<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](https://img.shields.io/npm/v/svelte-virtual-scroll-list?style=for-the-badge)](https://npmjs.com/package/svelte-virtual-scroll-list/)

Svelte implementation of vue library [vue-virtual-scroll-list](https://github.com/tangbc/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/](https://v1ack.github.io/svelte-virtual-scroll-list/)

[Simple example in Svelte REPL](https://ru.svelte.dev/repl/eae82aab17b04420885851d58de50a2e?version=3.38.2)

# Getting started

## Installing from npm

`npm i svelte-virtual-scroll-list -D`

or

`yarn add svelte-virtual-scroll-list -D`

## Using

```html

<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
<details>
<summary>Binding example</summary>

```html

<script>
    let vs
</script>

<VirtualScroll bind:this={vs}></VirtualScroll>
<button on:click={vs.scrollToBottom}>To bottom</button>
```

</details>

|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|

---
_Source: https://npm.io/package/@chrrubin/svelte-virtual-scroll-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._