IntersectionObserver触底加载最小可行配置是监听列表末尾占位div并设置rootMargin（如"0px 0px 200px 0px"），需确保目标为已挂载DOM节点、threshold用[0]、用isLoading防重复请求、滚动容器非window时显式指定root，且须兼容低版本浏览器。
IntersectionObserver 触底加载的最小可行配置
直接用 IntersectionObserver 监听列表容器底部是否进入视口，比监听滚动事件更轻量、更可靠。关键不是“监听最后一个元素”，而是监听一个占位 div（比如 loading-ref），它始终放在列表末尾。
必须设置 rootMargin，否则默认只有完全进入视口才触发——用户根本看不到加载提示就滑过去了。常见做法是设为 "0px 0px 200px 0px"，即底部预留 200px 提前触发。
实操建议：
- 观察目标必须是真实 DOM 节点，不能是虚拟节点或未挂载的 ref（React/Vue 中需确保 ref 已绑定）
-
threshold用[0]即可，不需要设成[0, 0.1, 0.5]等多阈值——触底加载只关心“是否开始交叉”，不关心比例 - 务必在
observer.observe()前确认目标节点已存在，否则静默失败，无报错
加载中状态与重复触发的防抖处理
用户快速滚动时，IntersectionObserver 可能连续触发多次回调，导致重复请求。这不是 Observer 的 bug，而是它按帧汇报交叉状态的正常行为。
实操建议：
- 用布尔变量（如
isLoading）控制请求开关：回调里先判断if (isLoading || !isIntersecting) return - 加载完成后记得调用
observer.unobserve(target)，再在新数据追加后重新observe(target)——否则旧节点仍被观察，容易误触发 - 如果使用 React，不要在
useEffect里每次重连 observer；应把 observer 实例缓存为 ref，避免重复创建
滚动容器不是 window 时的 root 设置
无限滚动列表常嵌在局部滚动区（如 height: 500px; overflow-y: auto 的父容器），此时 IntersectionObserver 默认以 window 为根，永远无法正确计算交叉位置。
实操建议：
- 显式传入
root: document.querySelector('.list-container')，且该容器必须有明确高度和overflow样式 - root 元素不能是 transform 或 will-change 启用硬件加速的节点，否则可能造成 position 计算异常（尤其 Safari）
- 若 root 是 Vue/React 动态渲染的，确保获取时机在 DOM 挂载后，比如 Vue 的
onMounted，React 的useLayoutEffect
兼容性与降级 fallback 注意点
IntersectionObserver 在 IE 完全不支持，Android 4.4–4.4.4 也缺失。但真正要警惕的是「部分支持」：iOS 12.2+ 才支持 rootMargin 字符串写法，旧版只认数组形式 ["0px", "0px", "200px", "0px"]。
实操建议：
- 检测时别只用
typeof IntersectionObserver !== 'undefined'，还要 try-catch 构造函数调用，某些低版本 UC 浏览器会暴露构造函数但实例化失败 - 降级方案优先用节流滚动事件 +
getBoundingClientRect()判断底部距离，而不是放弃无限加载 - 服务端需配合支持分页参数（如
page=2&size=20），避免前端自行维护 offset，防止漏数据或重复
最易被忽略的是：加载新数据后，若列表高度变化导致原 loading-ref 节点被挤出视口范围，而 observer 没有重新绑定，下一次触底就彻底失效。这个边界情况在数据条目高度不固定时尤为明显。
