无限滚动
Infinite Scroll
别名:Infinite Scroll无限加载滚动到底自动加载下滑加载更多滚动加载自动翻页
这是什么
用"滚动到底自动追加下一页"取代传统分页：用户持续下滑，新内容不断出现， 底部以加载指示或哨兵元素衔接。它解决的是浏览节奏被打断的问题—— 用户不必寻找"下一页"按钮，注意力始终停留在内容流上，长列表被拆成一次次无感的追加。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 信息流、时间线等按时间追加的内容
- 浏览型任务，用户不追求精确定位
- 内容体量大、单页翻页成本高
✕ 不适用场景
- 用户需要跳页、定位或回找特定条目
- 页脚内容重要，会被无限推远而难以触达
- 需要明确"共 N 条"的总量边界感
常见形式
滚动哨兵
Sentinel
底部哨兵元素进入视口即触发加载
兜底按钮
Fallback button
自动加载失败或停顿时提供"加载更多"按钮
到底提示
End notice
数据耗尽时展示"没有更多了"收尾
实现要点
overflow-y-autoIntersectionObservermin-heightscroll event优先用 IntersectionObserver 观察底部哨兵，也可监听 scroll 接近触底时提前请求。 加载中显示指示并加锁防止重复触发；插入内容时保留滚动位置、占位高度尽量一致， 避免布局跳动。提供"加载更多"兜底按钮与"没有更多了"结束态。
横向对比
查看完整对比 →相关概念
用带页码的控件把长结果集切分为离散页面：用户显式点击页码或上一页 / 下一页 按钮取回对应片段，当前位置永远可知、可分享、可回退。与无限滚动的"失控 漂移"相对，它是数据浏览中最可控的方式，也是搜索结果与后台表格的默认选择。
组件替代方案在列表顶部按住并向下拖动，出现随拖动距离变化的加载指示，超过阈值后松手即重新拉取最新数据。 它解决的是"内容可能已经过期"的问题——用户主动、可预期地请求更新， 而不是被动等待自动轮询，刷新的时机和结果都由自己掌控。
交互模式替代方案用与真实内容结构一致的灰色占位块表示加载状态，通常带轻微的微光扫过或呼吸动画。 它告诉用户"内容马上就位，结构长这样"，而不是让用户盯着空白或转圈等待。
交互模式相似概念用"推迟加载"的方式处理暂不在视口内的资源：图片、列表分块、组件等在接近或进入可视区域时才真正请求和渲染。 首屏只承担可见部分的开销，配合占位骨架避免突然撑开布局，让长页面既快又稳。
交互模式相似概念用即时过滤把大列表缩到与当前输入相关的一小部分：用户在搜索框敲字，列表随之实时收窄， 并显示命中数量与空结果提示。它把"查找"变成"修剪"，不用提交、不用等跳转，反馈就在眼前。
交互模式相似概念