A virtual grid: a million cells, about 50 in the DOM
The same range maths runs twice, for rows (scrollTop) and columns (scrollLeft). Only the cells where both ranges meet are rendered.
A virtualised list keeps thousands of items scrollable while only the 10 to 20 rows you can see exist in the page: it works out the visible slice from the scroll position, positions those rows inside a full-height spacer, and measures rows whose height it can't know in advance.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Rows are 50px, the viewport is 400px, there's no header and overscan is 2. Which indexes render when scrollTop is 1,025?
Add a "Jump to row 5000" button to the fixed-height list.
Make the fixed-height list keep a selected row highlighted after it scrolls out and back in.
Explain it without notes
Explain how a virtualised list decides which rows to render, with the formula for fixed-height rows.
How do you virtualise rows whose heights aren't known in advance?
What is overscan and how do you choose it?
A chat loads older messages at the top and the user's position jumps. Why, and how do you fix it?
What do you lose by virtualising, and how do you reduce each cost?
Preview
Console
Nothing logged yet.Expected console output
Start: 40 of 1000000 cells, R1 C1 to R8 C5
Scrolled: 54 of 1000000 cells, R500 C100 to R508 C105