Advanced
Infinite scroll with a sentinel
#feed is a 200px scroll box that shows the first page of 10 items (class item). fetchPage(cursor) returns { items, nextCursor } and logs fetch after …; there are 30 items in total. Don't change it.
Load the next page when the sentinel div at the end of the list comes into view inside #feed: use an IntersectionObserver with root set to the #feed element (a rootMargin of at most 100px).
Never start two requests at once, never add duplicates, and when nextCursor is null stop loading and show <span id="end">No more items</span>. Exactly 3 requests should be made in total.
What Check tests
- The first page of 10 items loads
- Scrolling to the bottom of #feed loads the next page
- All 30 items load, then the end message appears
- No duplicate items
- Exactly 3 requests in total
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.