最可靠的滚动加载方案是用Intersection Observer监听底部占位元素，配合requestId防重复请求、transform位移保滚动位置、约定is_last_page标识结束，并做可操作错误处理。
监听滚动到底部触发加载的可靠判断方式
直接用 window.scrollY + window.innerHeight >= document.body.scrollHeight 容易误判，尤其在页面有动态高度变化（比如图片懒加载、广告位插入）或 CSS box-sizing 不一致时。更稳的做法是用 Intersection Observer 监听一个占位 <div id="loader-trigger"></div> 元素是否进入视口：
- 把该
div放在列表末尾，且始终保留在 DOM 中（不销毁） - 初始化时传入
{ rootMargin: '0px 0px 200px 0px' }，提前 200px 触发，避免用户感知卡顿 - 回调中调用加载逻辑后，立即
unobserve()，等新内容插入后再重新observe()一次，防止重复触发
fetch 加载下一页时如何维护请求顺序和防重叠
用户快速滚动可能触发多次加载，但后发的请求可能先返回，导致数据错乱。不能只靠“取消上一个 AbortController”——因为网络层取消不等于服务端停止处理，且部分接口不支持中断。
- 给每次请求记一个递增的
requestId，全局存一个latestRequestId -
fetch成功后，先比对当前响应的requestId是否等于latestRequestId，不等就丢弃 - 加载中状态用布尔值
isLoading控制 UI 按钮/加载条，同时禁止再次发起请求（比单纯禁用按钮更可靠） - 如果接口返回分页信息（如
next_cursor或page），优先用它拼 URL，别依赖前端自增page=2,3,4...，避免跳页或重复
插入新内容后如何保持滚动位置不跳动
直接 element.innerHTML += newHtml 或 append() 新节点，会导致浏览器重排，特别是列表项高度不固定时，滚动条会突然“上蹿”或“下掉”。关键不是阻止重排，而是让重排不改变用户当前看到的位置。
- 加载前记录当前列表最后一项的
offsetTop（不是scrollTop） - 插入新内容后，计算新增内容总高度，再用
scrollBy(0, delta)补偿偏移量 - 更简单稳妥的做法：用
position: relative包住整个列表容器，加载时先transform: translateY(-Xpx)把容器上移，插入后再还原，视觉上无感 - 务必确保所有列表项有明确高度（哪怕用
min-height），否则浏览器无法准确预估布局变化
服务端返回空数据时的边界处理
很多实现只检查 response.ok 或 data.length > 0，但实际场景中，“已到底部”可能表现为返回 { code: 0, data: [], has_more: false }，也可能直接 200 返回空数组却不带标识字段。
立即学习“前端免费学习笔记（深入）”；
- 必须和服务端约定一个明确的结束信号，比如固定字段
is_last_page: true或next_url: null - 前端收到响应后，无论成功失败，都要检查这个字段；若为真，就移除触发器
div或停用IntersectionObserver - 错误处理不能只弹
alert或写死console.error：要显示可操作提示（如“加载失败，点击重试”），并绑定重试逻辑到该提示上 - 本地调试时，可用
fetch拦截或 Mock Service Worker 模拟“空响应”，验证降级流程是否自然
真正难的不是“怎么加载”，而是加载过程中各种异步状态（滚动、请求、渲染、用户干预）的耦合。一个没被观察到的 resize 事件、一段没 await 的图片解码、甚至 iOS Safari 的 scroll bounce，都可能让“无限”变成“无限错乱”。
