IntersectionObserver 回调不触发的主因是配置与环境错位：默认仅监听进入视口、threshold 非数组静默失败、root 未设导致观测范围偏移、元素未挂载就 observe、data-src 缺失或被原生 lazy 加载干扰、iOS 旧版存在滚动触发异常，调试应先开启 DevTools 的 Highlight intersections 高亮验证。
IntersectionObserver 回调不触发的常见原因
不是代码写错了，而是浏览器根本没把它当“可观察对象”——IntersectionObserver 默认只监听进入视口的元素，如果目标元素初始就在视口内（比如页面顶部），且没设置 threshold 或 rootMargin，回调可能只在首次注册时触发一次，甚至完全不触发。
-
root未显式设为null时，默认用顶层文档视口；若父容器有overflow: hidden但没设为root，实际观测范围就错位了 -
threshold是个数组，默认是[0]，意味着只有元素可见比例跨过 0%（即刚出现）才触发；想监听“50% 进入”就得写成[0.5]，写成0.5（非数组）会静默失败 - 目标元素没渲染完成就调用
observe()—— 常见于 Vue/React 中 ref 还没挂载、或 DOM 插入后没等 nextTick / useEffect 完成
懒加载图片时 IntersectionObserver 触发但 src 不切换
触发了回调，intersectionRatio 也大于阈值，但 <img alt="HTML5图片懒加载失效_HTML5IntersectionObserver触发条件调试技巧【技巧】" > 的 src 没变，大概率是 DOM 引用失效或异步赋值时机不对。
- 用
querySelector动态找图，但元素被框架重渲染后引用丢失，应改用事件委托或稳定 ref（如 React 的useRef、Vue 的template ref） - 回调里直接改
img.src = img.dataset.src，但该dataset.src已被清空或从未设置——检查 HTML 是否真有data-src属性，而不是data-original或其他命名 - 设置了
loading="lazy"的图片，浏览器原生懒加载和 JS 懒加载会冲突，优先禁用原生：给<img alt="HTML5图片懒加载失效_HTML5IntersectionObserver触发条件调试技巧【技巧】" >加loading="eager"或移除该属性
移动端 iOS Safari 下 IntersectionObserver 行为异常
iOS 15.4+ 修复了部分问题，但老版本（尤其 iOS 13–14）仍存在两个硬伤：滚动卡顿导致触发延迟，以及 isIntersecting 在快速滚动时频繁来回切换。
- 避免在回调中直接操作 DOM 样式或触发重排；把
img.src赋值后加个img.decoding = "async"，减少解码阻塞 - 不要依赖单次
isIntersecting === true就认为“已加载”，加个防抖或状态标记（如img.dataset.loaded = "true"），防止重复加载 - 测试时务必关掉「减少动画」和「缩小文字」等辅助功能，它们会干扰 IntersectionObserver 的计算精度
如何验证 IntersectionObserver 是否真正生效
别只看 console.log，得确认浏览器底层是否真的上报了交叉状态。最直接的方式是用 Chrome DevTools 的 Rendering 面板开启 “Highlight intersections”。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → ⚙️ Settings → Preferences → Rendering → 勾选
Highlight intersections，滚动时会看到绿色高亮区域 - 在回调里打印
entries[0].boundingClientRect和entries[0].rootBounds，对比两者的top/bottom，能立刻看出是否因rootMargin设置过大/过小导致误判 - 用
getBoundingClientRect()手动算一遍元素相对于视口的位置，和intersectionRect对比——如果不一致，基本是root配置错了
真正麻烦的不是写错 API，而是你以为它在工作，其实它连边界都没对齐。调试时先看高亮，再比坐标，最后查 dataset，顺序错了容易绕半天。
