Efficiently virtualize only the visible DOM nodes within massive scrollable elements using Lit, while maintaining complete control over markup and styles.
@tanstack/lit-virtual
utilizes Reactive Controllers to create the virtualizer and integrate it with the element lifecycle:
import { LitElement } from 'lit'
import { VirtualizerController } from '@tanstack/lit-virtual'
import { Ref, createRef } from 'lit/directives/ref.js'
class MyVirtualElement extends LitElement {
private virtualizerController: VirtualizerController<HTMLDivElement, Element>
private scrollElementRef: Ref<HTMLDivElement> = createRef()
constructor() {
super()
this.virtualizerController = new VirtualizerController(this, {
getScrollElement: () => this.scrollElementRef.value,
count: 10000,
estimateSize: () => 35,
overscan: 5,
})
}
render() {
const virtualizer = this.virtualizerController.getVirtualizer()
const virtualItems = virtualizer.getVirtualItems()
return html`
<div class="list scroll-container" ${ref(this.scrollElementRef)}>
${virtualItems.map(
(item) => html`<div class="item">${item.index}</div>`,
)}
</div>
`
}
}
Note that a Ref is attached to the scrolling container to allow the virtualizer to interact with it.
You can also create a virtualizer controller that attaches to the Window:
import { WindowVirtualizerController } from '@tanstack/lit-virtual'
class MyWindowVirtualElement extends LitElement {
private windowVirtualizerController: WindowVirtualizerController
constructor() {
super()
this.windowVirtualizerController = new WindowVirtualizerController(this, {
count: this.data.length,
estimateSize: () => 350,
overscan: 5,
})
}
// Implement render and other lifecycle methods as needed
}
For more examples and detailed usage, visit the official documentation.