Skip to main content
ELYTE
HardFrontendBuild

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 curr...

Start problemBrowse all problems

What you will practice

HTMLCSSJavaScriptPerformanceDOMRendering

Requirements

  • Render a scroll container with `data-testid="virtual-list"` at exactly `viewportHeight` pixels 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.

Starter files

index.htmlEditable template
styles.cssEditable starter
main.jsEditable starter

What the judge checks

  • Runs in the browser environment with the browser-eval runner.
  • Uses a 4000ms judge budget.
  • Requires test IDs: app, virtual-list.
  • Checks repeated UI regions: row.
  • Behavior rules include: Initial Render Required, Js Logic Required, Html Only Shortcut Disallowed, Must Virtualize Not Render All.

Constraints

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

Example behavior

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"]

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

Follow-up

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