Intersection Observer 是浏览器原生、高性能的可视区域检测方案，避免 scroll 事件高频触发和重排重绘；支持 rootMargin、root、threshold 等配置，兼容现代浏览器，旧版 IE 需 polyfill 降级。
检测元素是否进入可视区域，核心不是靠传统事件机制（比如 scroll 或 resize），而是用专门设计的观察式 API —— Intersection Observer。它不依赖事件监听循环，也不触发重排重绘，是浏览器原生支持、性能最优的方案。
为什么不用 scroll 事件手动判断
虽然可以监听 window.onscroll，再结合 getBoundingClientRect() 计算位置，但这种方式有明显缺陷：
- 滚动时高频触发，容易造成主线程阻塞和卡顿
- 需自行节流或防抖，逻辑复杂且易出错
- 无法自动适配滚动容器（如
overflow: auto的 div），需额外计算偏移 - 对固定定位（
position: fixed）或 transform 元素的兼容性不稳定
Intersection Observer 的基本用法
它通过异步回调通知元素与“根区域”的交叉状态，使用简洁、语义清晰：
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
- 创建观察器实例时传入回调函数，该函数在可见性变化时被调用
- 每个回调接收
entries数组，每个 entry 包含isIntersecting（是否相交）、intersectionRatio（可见比例）等关键字段 - 调用
observe(element)即可开始监听，无需绑定任何 DOM 事件
如何配置提前触发和滚动容器
实际业务中常需要“元素还没进视口就加载”，或目标在局部滚动区而非整个页面：
立即学习“Java免费学习笔记（深入）”；
-
rootMargin: '200px'可让判定区域向下扩展 200px，实现图片懒加载前预取 -
root: document.querySelector('.list-container')指定滚动父容器，适用于无限滚动列表 -
threshold: [0, 0.1, 0.5, 1]支持多档可见比例触发，比如 10% 时打曝光埋点，50% 时启动动画
兼容性与降级建议
现代浏览器（Chrome 51+、Firefox 55+、Safari 12.1+、Edge 79+）均已原生支持。若需兼容旧版 IE，可封装 fallback：
- 检测
'IntersectionObserver' in window，不支持时退回到getBoundingClientRect()+ 节流scroll监听 - 注意：IE 完全不支持 IntersectionObserver，但多数项目已不再要求支持 IE
- 第三方轻量库如
intersection-observer（polyfill）可按需引入
