真正可靠的滚动到底部判断是当前可视区域底部距离文档底部≤1px，需结合节流或requestidlecallback防重复、loading锁控、游标分页防重、domparser安全插入及intersectionobserver降级兼容。
监听滚动到底部的准确判断条件
直接用 window.innerHeight + window.scrollY >= document.body.scrollHeight 容易误触发，尤其在移动端或页面有动态高度变化时。真正可靠的判断是：当前可视区域底部距离文档底部 ≤ 1px，且必须排除滚动事件频繁触发导致的重复加载。
实操建议：
- 用
requestIdleCallback或节流（如 100ms 内只响应一次）包裹加载逻辑，避免卡顿 - 在触发前加锁：
let loading = false，加载中时直接 return - 移动端需额外监听
document.documentElement.scrollTop，因为部分安卓 WebView 下window.scrollY不更新
fetch 新内容后如何安全插入 DOM
拿到 JSON 数据后不能直接 innerHTML += ...，会重置已绑定的事件、丢失表单输入值、触发不必要的重排。
实操建议：
- 用
document.createElement和element.append()逐条插入，保持节点独立性 - 如果后端返回的是完整 HTML 片段（如 SSR 场景），用
DOMParser解析后再提取子节点：const parser = new DOMParser();<br>const doc = parser.parseFromString(htmlString, 'text/html');<br>container.append(...doc.body.children);
- 插入后手动恢复焦点（如搜索框）或滚动锚点（如“回到顶部”按钮状态），否则 UX 会断裂
如何防止重复请求和边界错误
常见错误现象：快速滚动多次触发、网络慢时用户反复滚动、最后一页仍发起请求、接口返回空数组却没停掉监听。
实操建议：
- 维护一个状态：
let hasMore = true，服务端返回{ data: [], next_cursor: null }时设为false - 每次 fetch 前检查：
if (!hasMore || loading) return - 在 fetch 的
.catch()或 4xx/5xx 响应中，显式调用hasMore = false并提示用户（避免静默失败后无限白屏） - 不要依赖“页码”做防重，用游标（cursor）或时间戳更可靠，比如后端返回
next_cursor: "2024-05-20T08:30:00Z"
兼容旧浏览器时的降级处理
IE11 不支持 IntersectionObserver，requestIdleCallback 在 Safari 里长期不支持，fetch 需要 polyfill。
实操建议：
- 优先用
IntersectionObserver监听底部占位元素（比 scroll 事件性能好得多），fallback 到 scroll 监听 - 占位元素写法：
<div id="infinite-loader" style="height: 1px;"></div>
，观察它是否进入视口 - 对 IE11，用
XMLHttpRequest替代fetch，并确保 Promise 有 polyfill - 不推荐用
setTimeout模拟requestIdleCallback，容易造成延迟累积
最易被忽略的是加载状态反馈——没有 loading 提示、没有骨架屏、没有错误重试按钮，用户会以为卡死或功能失效。滚动加载不是技术闭环，而是交互闭环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
