Intersection Observer 是浏览器原生高效API，用于监听元素进出可视区，不触发重排重绘；通过observe()监听已挂载DOM元素，回调接收entries和observer，支持threshold、rootMargin、root等配置，需注意布局样式导致的失效问题。
intersection observer 是浏览器原生提供的高效 api，专门用来监听元素是否进入（或离开）可视区域，不依赖滚动事件、不触发重排重绘，适合懒加载、曝光统计、触发动画等场景。
创建观察器并设置回调
只需传入一个回调函数，它会在元素可见性变化时被调用。这个回调接收两个参数：entries（交叉状态列表）和 observer（当前实例）。
- callback 是唯一必填参数，必须是函数；不传 options 也能运行，但默认 threshold 为 0（任意像素进入就触发）
- entries 是 IntersectionObserverEntry 对象数组，每个 entry 包含 isIntersecting（是否相交）、intersectionRatio（可见比例）、boundingClientRect（元素位置信息）等关键字段
- 回调本身异步执行，在浏览器空闲时段批量处理，不会阻塞主线程
配置触发条件的关键选项
通过 options 控制什么时候、在什么范围内触发回调，常用三项：
- threshold：决定“多少比例可见时通知”，可以是单个数字（如 0.1 表示 10% 进入视口），也可以是数组（如 [0, 0.25, 0.5, 0.75, 1] 表示多个可见度节点都触发）
- rootMargin：类似 CSS margin，字符串格式（如 '50px 0px 0px 0px'），用于扩大或缩小判定区域；常用来提前加载图片（设为 '200px' 就能在进入视口前 200px 触发）
- root：指定滚动容器，默认是浏览器视口（null）；若目标在某个 overflow: auto 的 div 内，必须显式传入该容器元素，且它需有明确高度
开始监听与资源管理
调用 observe() 启动监听，注意几个实操要点：
- observe() 只接受已挂载的 DOM 元素节点，不能传选择器字符串或 NodeList；传入未插入 DOM 的元素会静默失败
- 对同一元素多次调用 observe() 不会重复注册，内部自动去重
- 元素动态渲染（如 React/Vue 列表）后，需重新调用 observe()；卸载前建议调用 unobserve(element) 或 disconnect()，防止内存泄漏
- disconnect() 彻底释放资源，适用于页面级销毁；unobserve() 更适合局部停用
常见失效原因和排查方向
如果 callback 没执行或 isIntersecting 始终为 false，大概率不是代码写错，而是布局/样式问题：
立即学习“Java免费学习笔记（深入）”；
- 目标元素 display: none、visibility: hidden、opacity: 0（不影响相交判断，但 visibility: hidden 仍会被观测到）
- 父级设置了 overflow: hidden 且裁剪了目标元素
- 元素宽高为 0（比如只写了 content，没设 height/min-height）
- root 设为非视口元素，但该容器没有可滚动内容或缺失固定高度
