Virtualized List
Given items, rowHeight, viewportHeight, and overscan, build a virtualized scrolling list. Render a scroll container with data-testid="virtual-list" at exactly viewportHeight pixels tall. Only render the currently visible rows (plus overscan rows above and below) as data-testid="row" elements. The total scrollable height must behave as if all items exist. Each row must display the correct item text and appear at the correct vertical position using absolute positioning or transforms.
items = ["A", "B", "C", "D", "E", "F"], rowHeight=20, viewportHeight=60, overscan=1 User scrolls to scrollTop=40
Rendered rows: ["B", "C", "D", "E", "F"]
Top visible index is 2; with overscan=1, rendered range is indices 1 through 5.
- 1 <= items.length <= 50000
- Scroll container height must be exactly viewportHeight pixels
- Each row height must be exactly rowHeight pixels
Can you avoid re-creating DOM nodes on every scroll by reusing a fixed pool of row elements?
Keep moving through related frontend fundamentals problems and build a stronger search-friendly practice loop around this topic.
View track →