Skip to main content
Problem 10

Virtualized List

HARDBUILD
DOM+2

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.

Examples
Example 1
Input
items = ["A", "B", "C", "D", "E", "F"], rowHeight=20, viewportHeight=60, overscan=1
User scrolls to scrollTop=40
Output
Rendered rows: ["B", "C", "D", "E", "F"]
Note

Top visible index is 2; with overscan=1, rendered range is indices 1 through 5.

Constraints
  • 1 <= items.length <= 50000
  • Scroll container height must be exactly viewportHeight pixels
  • Each row height must be exactly rowHeight pixels
Follow-up

Can you avoid re-creating DOM nodes on every scroll by reusing a fixed pool of row elements?

Hints
Console output will appear here...