intersectionobserver 比 scroll 事件更适合无限滚动，因其不频繁触发、不阻塞主线程、无需节流防抖，只在元素进出视口时精准回调，支持 rootmargin 提前加载、适配任意滚动容器，且异步低优先级不影响帧率。
IntersectionObserver 为什么比 scroll 事件更适合无限滚动
因为 IntersectionObserver 不会频繁触发，不阻塞主线程，也不依赖 scroll 事件的节流/防抖——它只在目标元素真正进入或离开视口时才回调，天然适合监听“底部加载区”是否可见。
而用 window.addEventListener('scroll', ...) 做无限滚动，容易因高频触发导致卡顿，尤其在低端设备或长列表中；手动节流又可能漏判、延迟加载，造成白屏或用户拉到底部没反应。
- IntersectionObserver 是异步、低优先级的，浏览器可自行调度，不影响渲染帧率
- 它能精确识别元素是否“部分可见”，比如只需
rootMargin: '200px'就能提前触发加载，避免用户看到空白再等 - 不依赖
scrollTop + clientHeight计算，规避了滚动容器非window时的 offset 错误（比如在div#list内滚动）
如何监听“加载占位符”并触发下一页请求
核心是创建一个空的 DOM 节点（如 <div id="loader-trigger"></div>），放在列表末尾，用 IntersectionObserver 监听它是否进入视口。
注意：必须确保该节点真实存在于 DOM 中、且在列表最下方；如果用 React/Vue 动态渲染，要等列表更新完成后再调用 observer.observe()，否则会报 Failed to execute 'observe' on 'IntersectionObserver': The target element is not a descendant of the specified root。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 初始化时传入
{ root: null, rootMargin: '200px', threshold: 0 }——root: null表示以 viewport 为根，threshold: 0表示哪怕只有 1px 进入就触发 - 回调中先调用
observer.unobserve(triggerEl)防止重复触发，等请求返回、新数据插入后，再重新observe(triggerEl) - 如果接口返回空数组，应停用 observer（
observer.disconnect()），避免无意义轮询
const trigger = document.getElementById('loader-trigger');
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting && !loading) {
observer.unobserve(trigger);
loadNextPage();
}
},
{ rootMargin: '200px' }
);
observer.observe(trigger);
React 中 useIntersectionObserver 自定义 Hook 的关键细节
不能直接在组件内每次渲染都新建 Observer 实例，否则会内存泄漏且重复绑定；也不能把 ref 传给 useEffect 后不加依赖检查，导致 ref 还没挂载就 observe。
常见错误是把 triggerRef 当作普通变量传进依赖数组，但 ref 对象本身不变，内容变——必须监听 triggerRef.current 的变化，或用 useRef 缓存 observer 实例。
- Observer 实例应由
useRef保存，在组件卸载时调用.disconnect() - 触发逻辑应封装在 useCallback 中，并将 loading 状态、loadNextPage 函数作为依赖，避免闭包 stale
- 如果列表使用虚拟滚动（如 react-window），不能监听“占位符”，而要监听最后渲染项的 ref —— 因为占位符可能被裁剪出 DOM
移动端 Safari 和 iOS WebView 的兼容性坑
iOS 13.4+ 支持 IntersectionObserver，但早期版本（尤其是 WKWebView）存在 isIntersecting 始终为 false 或回调不触发的问题，根本原因是 Safari 对 rootMargin 的解析异常，特别是负值或带单位的字符串写法。
- 强制用字符串格式，如
'200px'，不要写200或'200'（后者被当 200px？实际是 200em） - 避免
rootMargin: '-50px'，iOS 旧版对负 margin 支持差，改用正向提前量（如'100px'）更稳妥 - 若仍不触发，降级方案：监听
window.onscroll+getBoundingClientRect()判断 trigger 元素 bottom 是否 ≤ window.innerHeight
真正麻烦的不是写不出来，而是滚动行为在不同设备上表现不一致——比如 Android Chrome 正常触发，iOS 上却要多拉半屏。务必在真机上测，别信模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
