Infinite Scroll
无限滚动
Keep scrolling down and the next page loads automatically, with no "next page" button anywhere.
Live Demo
Actually clickableItem 1
3 min ago
Item 2
3 min ago
Item 3
3 min ago
Item 4
3 min ago
Item 5
3 min ago
Item 6
3 min ago
What you just saw:Weibo, a Pinterest masonry feed as you scroll, a Zhihu feed — reach the bottom and the next batch starts loading on its own.
What it actually is
Infinite scroll turns browsing into continuous, endless exploration. It fits content feeds people browse casually, but it brings three real problems: the footer becomes unreachable, you cannot return to where you were, and browser back/forward stops working.
Anatomy · What it's made of
Sentinel哨兵元素
Watched with IntersectionObserver
Loading加载中
Three bouncing dots at the bottom
End Marker到底提示
"You have reached the end"
Back to Top回到顶部
Appears after scrolling past three screens
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Content is exploratory with no clear end | Yes |
| The goal is casual browsing (social, inspiration, news) | Yes |
| The browse path does not need deep linking or sharing | Yes |
| Users need to reach "page N" | No |
| Content has a fixed structure (orders, invoices, logs) | No |
Infinite scroll breaks the browser back button — users finish reading and cannot return to the list without re-scrolling through everything.
It is bad for SEO: search engines cannot crawl past the first page of results.
Always show an end-of-feed marker plus a "back to top" control at the bottom, otherwise users cannot tell whether there is more.
Similar Patterns
Don't mix these upInfinite ScrollCurrent
无限滚动
Keep scrolling down and the next page loads automatically, with no "next page" button anywhere.
Pagination
分页
A long list is cut into pages, with a row of page numbers at the bottom that lets you jump to one of them.
In one line:Keep scrolling down and the next page loads automatically, with no "next page" button anywhere.
How to tell AI
Three levels of promptAdd the component name and specifics
Load the next page automatically when the list scrolls to the bottom: show a loading animation, append the loaded items to the end of the list, and once everything is loaded show "You have reached the end" along with a "back to top" button.
Don't just say this to AI
Bad → BetterDon't say this to AI
Load more automatically when scrolled to the bottom.
Say this instead
Add Infinite Scroll: use IntersectionObserver on an end-of-list sentinel (rootMargin 200px) to trigger early, set a loading flag to prevent duplicate requests, surface a "Retry" affordance instead of failing silently, and show "You have reached the end" plus a "back to top" button once everything is loaded.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.