Virtual scrolling, from the first list
A normal list creates one DOM element for every record. A virtual list keeps the complete data collection but mounts only the small range that can be seen. This reduces layout and rendering work without changing how the application owns its data.
Virtualization does the work needed for the visible area instead of preparing the whole room.
The data contains 150,000 rows; the browser mounts only the current window and nearby overscan.
Real item sizes may differ from the initial estimate. Mounted items are measured
with ResizeObserver, and the model corrects offsets while keeping the visible
position stable.
Build the first list
- Open the simple-list implementation for your stack.
- Install the package shown in that example’s
package.json. - Copy the example from its Code tab, then replace its generated rows with your data and item component.
The example is the canonical minimal implementation. The documentation does not repeat it so that fixes to lifecycle, measurement, or framework syntax have one source of truth.
What each layer owns
| Layer | Responsibility |
|---|---|
| Your application | Data, item content, accessibility, and presentation |
| Framework adapter | Component lifecycle and keyed child reconciliation |
| Virtual core | Sizes, offsets, rendered range, anchoring, and DOM geometry |
For a normal list, use the highest-level API offered by the adapter. Lit uses one
VirtualController, Svelte uses the binding returned by createVirtualList, and
React, Preact, Solid, and Vue expose VirtualList. Use layout primitives or core
directly only when the required DOM cannot use that shape.