COMPONENT 75 · Motion & Interaction
无限滚动
Infinite Scroll
也叫Endless ScrollContinuous Feed无限列表
接近列表末尾时自动继续加载内容，形成连续浏览流。
Automatically loads more content near the end of a list for continuous browsing.
ANATOMY & USAGE
结构与使用建议
组成部分
- 内容流
- 加载触发点
- 加载与结束状态
适合使用
- 内容用于探索且用户无需定位具体页码时。
不建议使用
- 用户需要稳定位置、到达页脚或比较特定结果时。
键盘与无障碍
- 提供加载更多按钮作为替代，维护焦点和浏览器返回位置，并清楚播报新内容数量。
DESCRIBE IT TO AI
这样告诉编程助手
实现无限滚动（Infinite Scroll）：接近列表末尾时自动继续加载内容，形成连续浏览流。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<section class="demo stack">
<ol id="feed">
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
</ol>
<div id="sentinel" aria-hidden="true">
</div>
<p id="feed-status" role="status">
</p>
<button id="load-more" type="button">加载更多</button>
</section>