Keeping the scroll anchored when older items load
Both boxes turn off the browser's own anchoring (overflow-anchor: none) to show the raw problem. The left one keeps the same scrollTop, so new rows push the reader's message out of view. The right one adds the height that appeared above.
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
Before: plain shows Message 105, anchored shows Message 105
After: plain shows Message 85, anchored shows Message 105