用intersectionobserver实现无限滚动的核心是监听底部占位元素是否进入视口：配置threshold:0、root:null，回调中判断isintersecting并用loading节流，加载后unobserve或重observe，最后页调disconnect。
用 IntersectionObserver 实现无限滚动，核心是监听“加载更多”占位元素是否进入视口，触发数据获取并追加内容，避免频繁滚动事件监听，性能好、兼容性佳（现代浏览器均支持）。
创建并配置 IntersectionObserver
观察器需指定回调函数和配置项，关键点在于只关注目标是否可见一次（threshold: 0），且不重复触发（触发后可选择解绑或重置）：
- 设置
root: null表示以浏览器视口为根容器 -
threshold: 0表示只要目标元素有任意像素出现在视口就触发 - 回调中调用
observer.unobserve(target)防止重复加载（适合单次加载场景）
绑定加载占位元素（sentinel）
在列表底部插入一个空的 DOM 元素（如 <div id="sentinel"></div>），作为观察目标：
- 确保该元素在 DOM 中存在且可被观察（不能 display: none 或 visibility: hidden）
- 推荐用 CSS 保证其高度足够（如
height: 1px），避免因过小导致不可靠触发 - 首次渲染后立即调用
observer.observe(sentinel)
加载逻辑与状态控制
触发回调时需判断是否允许加载（防止重复请求），并更新加载状态：
- 用布尔变量（如
loading = false）控制请求节流，加载中直接 return - 请求前设
loading = true，成功/失败后设为false - 加载完成后重新 observe sentinel（若需持续监听），或等下次滚动再挂载新占位符
- 注意处理最后一页：服务端返回空数组或
hasMore: false时，可调用observer.disconnect()停止监听
简单示例代码片段
以下为最小可用结构（省略 fetch 错误处理和 loading UI）：
const observer = new IntersectionObserver((entries) => {
const entry = entries[0];
if (entry.isIntersecting && !loading) {
loading = true;
fetchMoreData().then(() => {
loading = false;
// 可选：重新观察（如果 sentinel 仍存在）
observer.observe(sentinel);
});
}
}, { threshold: 0 });
observer.observe(sentinel);
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
