Virtualized List

Render a list of ten thousand rows while keeping only the ones on screen in the DOM — and keep the scrollbar behaving as though every row were present.

Virtualisation is two independent tricks, and describing them separately is most of the answer.

The first is lying to the scrollbar. A container as tall as every row combined gives the browser something to measure, so the scrollbar is the right length and scrollTop covers the right range even though only twenty elements exist. Without it the list scrolls one screen and stops.

The second is deriving the window from the scroll position. Fixed row heights turn "what is visible" into division, so nothing has to be measured and there is no layout read in the scroll path — which is exactly why the fixed-height version is what gets asked. Variable heights need measured offsets and a running total, and that is the follow-up rather than the starting point.

Offsetting the whole window with a single transform, rather than positioning each row absolutely, is worth choosing on purpose: it is one style property instead of one per row, and the rows stay in normal flow so borders and alternating backgrounds still compose. Absolute positioning is what forces most hand-rolled virtual lists to reimplement their own separators.

Note how this differs from infinite scrolling. There the data does not exist yet and the job is fetching more; here all the data is present and the DOM is the bottleneck. Real lists often need both.