callback 是唯一必填参数；options 可选但漏设 root 或 threshold 会导致监听失效，需确保目标元素已挂载、未被隐藏且具有宽高。
IntersectionObserver 构造函数的必填参数是什么
创建 IntersectionObserver 实例时，callback 是唯一必填参数；options 完全可选，但漏掉关键配置（比如 root 或 threshold）会导致监听完全失效或行为异常。
-
callback必须是函数，接收两个参数：entries（IntersectionObserverEntry数组）和observer（当前实例） - 不传
options时，默认以视口为根容器、threshold: 0（即元素任意像素进入视口就触发）、rootmargin: '0px' - 如果目标元素在某个滚动容器内（而非整个页面），必须显式设置
root为该容器元素，否则永远收不到回调
如何正确调用 observe() 并避免重复监听
observe() 方法只接受一个 dom 元素节点，不能传 nodeList 或选择器字符串；多次对同一元素调用 observe() 不会报错，但也不会重复注册——它内部自动去重，这点可以放心。
- 务必确保传入的是已挂载到 DOM 的元素，否则
observe()静默失败（无报错，也无回调） - 如果元素后续可能被移除或替换（如 react/vue 动态渲染），应在卸载前调用
unobserve(element)，否则 observer 持有对已销毁节点的引用，可能引发内存泄漏 - 批量监听多个元素时，不要写
elements.forEach(el => observer.observe(el))—— 这没问题，但要注意：所有元素共享同一个callback，需靠entry.target区分具体是哪个元素触发了变化
threshold 和 rootMargin 怎么配合才能精准控制触发时机
threshold 决定“多少比例可见时触发”，是 0–1 的数组（如 [0, 0.25, 0.5, 0.75, 1]）；rootMargin 是字符串，类似 css margin 语法（如 '0px 0px -50px 0px'），用于扩大或缩小根容器的判定边界。
- 想实现“元素下边缘刚触达视口底部时触发”，设
threshold: [0]+rootMargin: '0px 0px -1px 0px'（负 bottom margin 把判定线往上提 1px） - 想让图片懒加载在进入视口前 200px 就开始加载，用
rootMargin: '200px'即可，无需 js 计算位置 -
threshold越密集（如[...Array(100).keys()].map(i => i/100)），回调越频繁，性能开销越大；日常场景用[0, 0.1, 0.5, 1]已足够
常见错误：callback 不执行或 entry.isIntersecting 始终为 false
最常踩的坑不是 API 用错，而是布局或样式导致浏览器根本无法计算相交状态——比如目标元素 display: none、visibility: hidden、父级 overflow: hidden 且元素被裁剪、或元素宽高为 0。
立即学习“Java免费学习笔记（深入）”；
- 检查
entry.boundingClientRect.height > 0 && entry.boundingClientRect.width > 0，若为 0，说明元素尚未渲染出尺寸 - 用
getComputedStyle(el).display === 'none'或el.offsetParent === NULL排查是否被隐藏或脱离文档流 - chrome DevTools 的 “Rendering” 面板勾选 “Paint flashing” 和 “Layout Shift Regions”，能直观看到哪些区域被判定为“不可见”
const observer = new IntersectionObserver( (entries) => { entries.forEach(entry => { if (entry.isIntersecting) { console.log('可见:', entry.target.id, '可见比例:', entry.intersectionRatio); // 加载图片、启动动画、上报埋点... } }); }, { root: document.querySelector('.scroll-container'), threshold: [0, 0.5, 1], rootMargin: '50px' } ); document.querySelectorAll('.lazy-item').forEach(el => observer.observe(el)); 实际项目里最容易被忽略的，是 root 的引用生命周期——如果 root 元素被重新渲染（比如 Vue 的 v-if 切换），旧的 observer 仍持有对已销毁节点的引用，且不会自动重建。这时候要么手动 disconnect() + 重建，要么把 observer 创建逻辑收敛到 root 存在的上下文中。