A fixed-height virtual list with a sticky header
The scrollbar is the size of 10,000 rows, but only 9 to 12 rows ever exist. At the top there's no overscan above row 1; at the bottom the browser clamps scrollTop to the real maximum. Scroll it yourself and inspect the DOM.
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
Top: rendered rows 9 of 10000, first Order #1, last Order #9
scrollTop 1200: rendered rows 12 of 10000, first Order #38, last Order #49
Bottom: rendered rows 9 of 10000, first Order #9992, last Order #10000