The problem
Rendering ten thousand list rows creates ten thousand DOM nodes. Layout, paint, and memory all suffer, and scrolling stutters. Most of those rows are off screen anyway.
The technique
Virtual scrolling (also called windowing) renders only the rows currently visible plus a small buffer. As the user scrolls, rows leaving the viewport are removed and new rows are created.
- A tall spacer element reserves the full scroll height so the scrollbar feels right.
- The visible window is positioned with an offset so rows appear in the correct place.
- A small overscan buffer renders a few extra rows above and below to hide pop in.
Fixed versus variable height
- Fixed height rows make the math trivial: index equals scroll offset divided by row height.
- Variable height rows need measured sizes or estimates, often cached as rows are measured.
Key idea
Virtual scrolling renders only visible rows over a full height spacer, keeping the DOM small so huge lists scroll smoothly.