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 存在的上下文中。 
