Infinite Scroll
无限滚动
Aliases:Infinite Scroll无限加载滚动到底自动加载下滑加载更多滚动加载自动翻页
What is it
Replaces pagination with automatic loading: as the user scrolls to the bottom, the next page of content appends seamlessly, bridged by a loading indicator or sentinel element. It solves the broken browsing rhythm of hunting for a "next page" button — attention stays on the feed while long lists arrive in imperceptible chunks.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Feeds and timelines that grow over time
- Browsing tasks rather than pinpoint lookups
- Very large datasets where paging is costly
✕ When not to use
- Users need to jump to or relocate specific items
- Important footer — it gets pushed away endlessly
- Users need a clear sense of total result count
Variants
Sentinel
滚动哨兵
A bottom sentinel triggers loading on viewport entry
Fallback button
兜底按钮
A manual "load more" button when auto-load stalls or fails
End notice
到底提示
A "no more items" notice closes out exhausted data
Implementation
overflow-y-autoIntersectionObservermin-heightscroll eventPrefer an IntersectionObserver on a bottom sentinel, or listen to scroll and prefetch near the bottom. Show an indicator and lock re-entry while loading; keep the scroll position stable and match placeholder heights to avoid layout shift. Provide a manual "load more" fallback and an explicit end-of-list notice.
Compare
Full comparison →| Infinite Scroll无限滚动 | Pagination分页 | Pull to Refresh下拉刷新 | |
|---|---|---|---|
| Trigger | Automatic — fires at scroll bottom | Explicit clicks on page numbers | Deliberate pull gesture by the user |
| Data control | System-paced — user passively receives more | Strong — the user holds the position | User-initiated request for fresh data |
| Suitable content | Browsing-oriented feeds and timelines | Ordered, addressable result sets | Feeds and messages needing a manual refresh |
Related concepts
A page-numbered control that slices long result sets into discrete pages: users explicitly click a page number or prev / next to fetch that slice, so the current position is always known, shareable and reversible. The controlled counterpart to infinite scrolling's endless drift — the default for search results and admin tables.
ComponentsAlternativePress at the top of a list and drag downward: an indicator tracks the pull distance, and releasing past a threshold refetches the latest data. It solves the "content may be stale" problem — the user requests a refresh deliberately and predictably, staying in control of both timing and outcome instead of waiting for background polling.
PatternsAlternativeGrey placeholder blocks that mirror the real content structure while loading, usually with a subtle shimmer or pulse. It tells users "content is coming and it will look like this" instead of a blank page or a bare spinner.
PatternsSimilarDefers loading of off-viewport resources: images, list chunks and components are fetched and rendered only when they approach or enter the viewport. The first screen pays only for what is visible, with placeholders preventing layout jumps as content streams in.
PatternsSimilarNarrows a large list to whatever matches the current input: every keystroke filters the list in place, with hit counts and an empty-state hint. Finding becomes pruning — no submit, no page jump, feedback stays right in front of the user.
PatternsSimilar