使用 Intersection Observer API 实现无限滚动，通过监听占位元素进入视口触发内容加载。1. 创建观察器监听 sentinel 元素；2. 当元素 10% 可见时调用 loadMoreContent 发起请求；3. 加载后插入新内容并重新观察，避免重复请求与错误处理结合，提升性能与用户体验。
无限滚动是现代网页中常见的功能，用于在用户滚动到页面底部时自动加载更多内容。使用传统的 scroll 事件监听容易导致性能问题，因为其触发频率高且常伴随复杂的计算。而 JavaScript 的 Intersection Observer API 提供了一种更高效、更流畅的实现方式，它能异步检测元素是否进入视口，避免频繁操作 DOM 和监听 scroll 事件。
1. 理解 Intersection Observer 的工作原理
Intersection Observer 允许你监听一个元素与视口（或父容器）的交叉状态。当目标元素进入或离开可视区域时，回调函数会被触发，整个过程由浏览器优化，不会阻塞主线程。
相比 scroll 事件，它有以下优势：
- 性能更高：浏览器在空闲时间处理观察任务
- 无需手动计算元素位置或 scrollTop
- 支持懒加载图片、视频以及无限滚动等场景
2. 实现无限滚动的基本结构
假设页面中有一个内容列表和一个“加载更多”占位符元素（sentinel），我们通过观察这个占位符是否进入视口来触发新数据加载。
立即学习“Java免费学习笔记（深入）”；
<div id="container"> <div class="item">内容项 1</div> <div class="item">内容项 2</div> <!-- 更多项目 --> <div id="sentinel"></div> </div>
3. 使用 Intersection Observer 监听加载触发点
创建一个观察器实例，监听 sentinel 元素。当它出现在视口中时，加载新数据并插入到容器中。
JavaScript 示例：const container = document.getElementById('container');
const sentinel = document.getElementById('sentinel');
<p>function loadMoreContent() {
// 模拟异步请求
fetch('/api/more-items')
.then(res => res.json())
.then(items => {
items.forEach(text => {
const item = document.createElement('div');
item.className = 'item';
item.textContent = text;
container.appendChild(item);
});
});
}</p><p>const observer = new IntersectionObserver((entries) => {
const entry = entries[0];
if (entry.isIntersecting) {
loadMoreContent();
}
}, {
threshold: 0.1 // 当 sentinel 有 10% 可见时触发
});</p><p>observer.observe(sentinel);注意：threshold: 0.1 表示只要 sentinel 元素有 10% 出现在视口中就触发回调，这样可以提前加载，提升用户体验。
4. 优化与注意事项
为了确保无限滚动稳定运行，需考虑以下几点：
- 避免重复请求：可在请求发出后暂时取消观察，待新内容加载完成再重新 observe sentinel
- 处理错误：网络失败时应提供重试机制或提示
- 支持分页状态：维护当前页码或游标，防止重复加载相同数据
- 可访问性：添加“加载更多”按钮作为降级方案，保障不支持 Observer 的环境可用
基本上就这些。用 Intersection Observer 实现无限滚动既简洁又高效，关键是把加载逻辑绑定到可视状态变化，而不是滚动行为本身。这种方式减少了性能开销，也更容易维护。
