Infinite Scroll
A pattern that automatically loads the next batch of content as the user approaches the bottom of the page.
Plain English
Infinite scroll removes pagination by fetching more data before the user runs out of content to read. It's ideal for content feeds — social media timelines, image galleries, news streams — where there is no natural end point and users browse opportunistically. It is wrong for task-based interfaces like search results or e-commerce listings, where users need to find specific items and go back to where they were. The key rule: always show a loading indicator at the bottom so users know more is coming, and never silently load without feedback.
Technical
Use IntersectionObserver on a sentinel element at the bottom of the list. When the sentinel enters the viewport (threshold: 0.1), trigger the data fetch. During fetch, show a loading spinner with aria-label="Loading more items". After fetch, append new items and move the sentinel below them. Keep a "hasMore" boolean to remove the sentinel when all data is loaded. Debounce: only fire if not already fetching.
Live Demo
Infinite scroll feed
Showing 6 itemsPost #1
By designer · 1min read
Post #2
By designer · 2min read
Post #3
By designer · 3min read
Post #4
By designer · 4min read
Post #5
By designer · 5min read
Post #6
By designer · 1min read
Scroll to the bottom to auto-load more — ideal for feeds, wrong for search results.
Usage
✓ Good usage
An Instagram-style photo feed that quietly loads the next 12 photos when you're 3 cards from the bottom — you never stop scrolling.
✗ Bad usage
Search results with infinite scroll — users who scroll halfway down and click a result cannot return to their exact position, destroying their browsing context.
Recommended values
- IntersectionObserver threshold: 0.1–0.25
- Load batch size: 10–20 items
- Show spinner 300ms+ after trigger to avoid flash
- Sentinel position: 200–400px before the actual end
- Always show item count (Showing 40 of 200)
- Add an "End of results" message when hasMore is false
Common mistakes
- No end state — users scroll forever wondering if there is more content or if something is broken.
- Firing IntersectionObserver before first items render — loads data immediately on mount before any scrolling occurs.
- Not debouncing — rapid scroll events trigger multiple simultaneous fetches.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Implement infinite scroll on the product listing page. Use IntersectionObserver on a sentinel div at the bottom. Load 12 items per page. Show a centered spinner while loading. Display "Showing X of Y items" at the top. When all items are loaded, replace the spinner with "You've reached the end" text.