界面图鉴
无限滚动Infinite Scroll
无限滚动到底是什么？滚到底自动加载，和翻页比到底谁更好？
滚到底自动装载下一批内容，不用翻页——刷不完的信息流就是它。
01 · 拆开看看
这一块由什么组成
没有「下一页」按钮，页面自己在你快滚到底时偷偷把下一批接上。看起来什么都没有，其实藏了几个机关：
内容列表List
已经加载的条目，越刷越长。
触发线Sentinel
一条看不见的哨兵线，滚到它就去请求下一批。
加载指示Loader
底部转一下圈，告诉你新的一批在路上。
结束提示End
真到底时说一声「没有更多了」，别让人一直等。
02 · 常见变体
同一个零件，几种摆法
全自动，快到底就接上一批。
滚到底出一个「加载更多」，点了才继续。
显示结束语，顺手给个回到顶部。
03 · 火眼金睛
这三个列表里，哪一个是无限滚动？
三个列表都到底了，只有一个不用你动手就会继续长。
点一块试试，看看它叫什么
不是它。底部一排页码，要看下一页得自己点——每一页都有名字，能回得去。
不是它。一个按钮，点一下才多一批——它是无限滚动的「手动挡」。
就是它！底部只有一个转圈，快滚到时下一批就自己接上来，没有「下一页」这回事。
04 · 用与不用
什么时候该上它
- 信息流、瀑布流这种「随便刷」的场景
- 内容没有固定终点，比如时间线
- 手机端不想让人去点小页码
- 用户要找「第几条」或分享某一页——用分页
- 页面底部有页脚和重要链接
- 列表会长到几千条，浏览器吃不消
05 · 想一想
一道题，检查眼力
电商站的搜索结果有 2000 件商品，用户会反复比较、也会把结果发给朋友。列表怎么翻？
顺手，但用户找不回「刚才第 37 件」，也没法把「第 3 页」发给朋友，页脚更是永远够不着。
对。要比较、要回看、要分享链接的场景，页码给了每一屏一个固定地址。
2000 张商品图一次塞进页面，手机会卡到怀疑人生。
06 · 说给 AI 听
让 AI 改它时，这样说
说清触发距离、每批多少条、到底了怎么办——这三项 AI 默认都会随便定。
列表改成无限滚动，离底部 200px 时自动加载下一批
加载到第 5 批后改成「加载更多」按钮，别一直自动
没有更多内容时显示「到底了」，并给一个回到顶部
从详情页返回时记住滚动位置和已加载的内容
最容易踩的坑
无限滚动会吞掉页脚——用户永远够不到底部的链接。另一个大坑是「回不到原位」：点进详情再返回，列表从头加载，刚才刷到的那条找不着了。这两点没解决，别上它。