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.
- Render a scroll container with
data-testid="virtual-list"at exactlyviewportHeightpixels tall. - Render only visible rows plus the configured
overscan; do not render all items at once. - Each rendered row must use
data-testid="row"and display the correct item text for its index. - The total scrollable height must match the full item list.
- Rows must be vertically positioned with absolute positioning or transforms.
- Overscan must be applied and clamped at the start and end of the list.
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 →