Infinite Scroll
无限滚动
MobileWeb上手难度: 中等
一直往下滑就自动加载下一页，没有「下一页」按钮。
Live Demo
真的可以点内容 1
3 分钟前
内容 2
3 分钟前
内容 3
3 分钟前
内容 4
3 分钟前
内容 5
3 分钟前
内容 6
3 分钟前
你刚才看到的这个：微博、下滑的 Pinterest 瀑布流、知乎信息流——滑到底自动就开始加载下一批。
它到底是什么
Infinite Scroll 让浏览变成连续的、无终点的探索。它适合「随便刷刷」的内容流，但会带来三个真实问题：找不到页脚、无法回到刚才的位置、浏览器前进后退失效。
无限滚动infinite scroll无限加载自动加载瀑布流feed
Anatomy · 它由什么组成
Sentinel哨兵元素
用 IntersectionObserver 观察
Loading加载中
底部三个跳动小点
End Marker到底提示
「没有更多了」
Back to Top回到顶部
滑超过 3 屏后出现
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 内容是「探索型」的，没有明确终点 | 用 |
| 用户目的是随便刷（社交、灵感、资讯） | 用 |
| 浏览路径不需要定位和分享 | 用 |
| 用户需要找到「第 N 页」 | 不用 |
| 内容有明确结构（订单、账单、日志） | 不用 |
无限滚动让浏览器的返回键失效——用户看完想回到列表却只能重新刷一遍。
SEO 不友好：搜索引擎抓不到第 2 页之后的内容。
一定要在到达底部时提供「已经到底了 + 回到顶部」按钮，否则用户不知道还能不能继续。
Similar Patterns
别搞混一句话区分：一直往下滑就自动加载下一页，没有「下一页」按钮。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
列表滚动到底部时自动加载下一页：显示加载动画，加载完追加到列表末尾，加载完全部后显示「已经到底了」和「回到顶部」按钮。
不要只对 AI 说
Bad → Better不要这样对 AI 说
滑到底自动加载更多。
改成这样说
加 Infinite Scroll：用 IntersectionObserver 监听末尾 sentinel（rootMargin 200px）提前触发，加载中标志防重复请求，失败显示「重试」而非静默，加载完显示「已经到底了」+「回到顶部」按钮。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。