Intersection Observer API通过监听元素进出视口实现高效滚动动画，避免频繁scroll事件导致的性能问题。相比传统监听window.onscroll并计算位置的方式，它由浏览器优化重排重绘，降低CPU占用。创建观察器时可设置root、rootMargin和threshold参数控制触发时机，当目标元素进入视口时回调执行，常用于添加类名触发动画，如渐显、滑入等效果。示例中，元素10%可见且提前50px即触发动画，通过entry.isIntersecting判断是否进入视口，并添加animate-in类启动CSS过渡，动画完成后取消观察以避免重复触发。此外，该API也适用于图片懒加载和动态模块导入，将内容加载与动画分离，提升首屏性能。对于需重播的动画，可根据intersectionRatio可见比例管理类名状态，不解除观察即可反复触发。合理使用Intersection Observer能显著提升滚动动画流畅度与整体性能。
Intersection Observer API 是实现滚动驱动动画的高效方式，它能监听元素是否进入或离开视口，避免频繁操作 DOM 和 scroll 事件带来的性能问题。相比传统监听 window.onscroll 的做法，它更流畅、更节省资源。
使用 Intersection Observer 替代 scroll 监听
传统的滚动动画常通过监听 window 的 scroll 事件，结合 getBoundingClientRect 或 scrollTop 计算元素位置。这种方式会在滚动过程中频繁触发重排重绘，影响性能。
Intersection Observer 将观察逻辑交给浏览器优化，只在交叉状态变化时通知回调，大大降低 CPU 占用。
- 创建观察器时指定 root、rootMargin 和 threshold 等参数，控制触发时机
- 将需要触发动画的元素标记为 target，交由 observer 观察
- 在回调中根据 isIntersecting 字段判断是否进入视口
实现渐现/滑入等常见滚动动画
很多页面效果如“元素滑入”、“图片渐显”，都可以通过该 API 配合 CSS 类切换实现。
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-in');
observer.unobserve(entry.target); // 动画只需触发一次
}
});
}, {
threshold: 0.1, // 10% 可见时即触发
rootMargin: '0px 0px -50px 0px' // 提前 50px 触发，提升体验
});
document.querySelectorAll('.scroll-animate').forEach(el => {
observer.observe(el);
});
CSS 中定义 .animate-in 的过渡效果，比如 opacity、transform 变化。
延迟加载内容与动画解耦
除了视觉动画，也可用于延迟加载组件或播放视频。把动画逻辑和内容加载分开处理，提升首屏性能。
- 图片懒加载：元素进入视口再设置 src
- 动态加载模块：Intersection Observer 触发 import()
- 控制动画重播：通过 intersectionRatio 判断可见比例决定是否重置动画
对于需要反复触发的动画（如离开后再次进入），可不调用 unobserve，而是根据状态管理类名。
基本上就这些。用好 Intersection Observer 能让滚动动画既顺滑又不影响整体性能。
