跳到主要内容

交互模式 · 列表

无限滚动

Infinite Scroll

也叫:滚动加载、触底加载、上拉加载更多

用户滚动到列表底部时自动加载下一批内容,不用手动翻页,列表看起来像没有尽头。

示例

详细解释

无限滚动常见于信息流、商品列表和图片瀑布流:页面先加载一批数据(比如 20 条),用户快滑到底部时,前端自动请求下一页并追加到列表末尾。检测「快到底了」一般用 IntersectionObserver 监听列表底部的一个占位元素。

它和 懒加载 容易混淆:无限滚动是不断「追加新数据」,懒加载是页面上已有的图片或模块「等滚到附近再加载资源」,两者经常一起用。

只需要浏览、不需要精确定位的内容适合无限滚动;需要跳到第几页、回头找某条数据的后台表格更适合分页。底部要处理三种状态:加载中、没有更多了、加载失败点击重试。

开发者信息
术语 ID
interaction-infinite-scroll
DOM 选择器
没有 DOM 线索,这个概念不在页面上直接识别。
优先级
1 · 同一层有多条命中时,优先级高的胜出
版本
v1 · 更新于 2026/09/29