IntersectionObserver&滚动动画、懒加载、虚拟列表等应用场景&代码实现

IntersectionObserver
虚拟列表

---

IntersectionObserver 全面解析

一、原有方法的缺陷
在 IntersectionObserver 出现前，开发者通常通过 滚动事件监听（scroll） 和 Element.getBoundingClientRect() 方法判断元素是否进入可视区，但这种方式存在明显缺陷：

1. 性能问题：scroll 事件高频触发，每次触发需重新计算元素位置，导致主线程频繁执行计算，引发页面卡顿。
2. 计算冗余：getBoundingClientRect() 会强制触发浏览器重排（reflow），若频繁调用会显著影响页面性能。
3. 代码复杂度高：需手动处理视口尺寸、元素相对位置等逻辑，难以应对复杂布局（如嵌套滚动容器、动态加载内容）。

---

二、IntersectionObserver 的原理与优点
原理
IntersectionObserver 通过 异步观察目标元素与根元素（默认视口）的交叉状态 实现可见性检测：
• 交叉区域计算：浏览器内部自动计算目标元素与根元素的交集区域，无需开发者手动处理几何信息。

• 阈值触发机制：可预设多个交叉比例阈值（如 0%、50%、100%），当实际交叉比例达到阈值时触发回调。

• 浏览器级优化：由浏览器底层实现，自动优化计算逻辑，避免主线程阻塞。

优点

1. 性能高效：异步执行、零重排，适用于高频场景（如滚动）。
2. 配置灵活：支持自定义根元素、边缘扩展（rootMargin）、多阈值触发等参数。
3. 低侵入性：仅关注交叉状态变化，无需侵入业务逻辑或频繁操作 DOM。

---

三、API 参数详解
构造函数参数

const observer = new IntersectionObserver(callback, {
   
  root