Infinite scroll from scratch: sentinel, guard, de-duplication, retry and end
The script scrolls the box to the bottom to trigger loads. The third page fails once, the observer stops, and only the Retry click loads it. After the last page the sentinel shows the end message and stops observing. Scroll by hand after it runs, or press Run and scroll yourself.
Long collections arrive in pages: numbered pagination, a Load more button, or infinite scroll that fetches the next page when an invisible sentinel element comes into view; doing it right means cursors instead of offsets, one request at a time, de-duplication, an end state, retry on errors and bringing users back to the same place.
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.
Write appendUnique(oldItems, newItems) that appends without duplicate ids and keeps the old order.
Change the first example to a Load more button instead of a sentinel (keep the guard, end and retry).
Explain it without notes
Compare offset and cursor pagination. When would you choose each?
How do you implement infinite scroll without listening to scroll events?
List the bugs a naive infinite scroll has and how to prevent each.
When should a product use numbered pagination instead of infinite scroll?
Preview
Console
Nothing logged yet.Expected console output
Loaded 10 posts after cursor null
Loaded 10 posts after cursor 9
Failed: Network error
Loaded 10 posts after cursor 19
Loaded 5 posts after cursor 29
Posts on screen: 35. You're all caught up