Virtualized Scroller

A web component for scroll containers that render only the visible items of a large array, built on Lit Virtualizer.

A scroller that renders only the items near its viewport, for lists of thousands.

Installation

npm install @3mo/virtualized-scroller

import '@3mo/virtualized-scroller'

Usage

<mo-virtualized-scroller style='height: 400px'
	.items=${Array.from({ length: 1000 }, (_, index) => index + 1)}
	.getItemTemplate=${(number: number) => html`<div style='padding: 10px'>Item ${number}</div>`}
></mo-virtualized-scroller>

Examples

• Variable Heights — Items of different heights are measured as they render, so a hundred thousand of them still scroll smoothly.
• Scroll To Item — getElement(index) returns an item even when it is not rendered, so that it can be scrolled into view.

API

mo-virtualized-scroller

Properties

| Name | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | items | items | T[] | "new Array<T>()" | The items to render, all of them | | getItemTemplate | getItemTemplate | GetItemTemplate<T> | "() => html.nothing" | Renders an item, given the item and its index |

Links

• Documentation
• Changelog
• Source

License

MIT © 3MO GmbH