intersectionobserver 通过浏览器原生机制异步监听元素进入视口，性能优于 scroll 事件；需挂载后立即初始化，配合 threshold 和 rootmargin 精准控制触发时机，并用 css class 驱动 gpu 加速动画。
IntersectionObserver 怎么监听元素进入视口
直接用 IntersectionObserver 实例监听目标元素是否出现在可视区域，不依赖 window.onscroll，性能好、无抖动。它不是“滚动动画库”，而是浏览器原生的可见性检测机制，动画触发逻辑得你自己接上。
常见错误是等页面加载完才初始化 Observer，但此时目标元素可能已进入视口，导致首次不触发回调。必须在元素挂载后立即开始监听，尤其在 SPA 或动态插入内容时。
- 创建实例时传入
{ threshold: 0.1 }表示元素 10% 高度进入视口就触发，threshold可传数组（如[0, 0.25, 0.5, 0.75, 1]）实现多阶段响应 - 不要在回调里反复调用
observer.unobserve()后又observe()，容易漏帧；只需首次触发后加 class 或播放 CSS 动画，让样式系统接管后续 - 注意兼容性：IE 完全不支持，iOS Safari 12.2+ 才支持
rootMargin，做吸顶或延迟触发需降级处理
怎么配合 CSS 实现“滚动进入即淡入上滑”动画
Observer 只负责通知“该动了”，动画本身交给 CSS 更稳。关键在于用 class 控制状态，避免 JS 操作 style 属性引发重排。
典型写法是初始给元素加 is-hidden 类，Observer 触发后移除它，靠 CSS 过渡生效：
/* HTML */
<div class="fade-up is-hidden">内容</div>
<p>/<em> CSS </em>/
.fade-up {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up:not(.is-hidden) {
opacity: 1;
transform: translateY(0);
}</p>
容易踩的坑：transition 必须写在未触发的 class 上（即 .fade-up），而不是 .fade-up:not(.is-hidden)，否则首次移除 class 时没有过渡效果；另外，transform 和 opacity 是仅有的两个能触发 GPU 加速的属性，别用 top 或 margin 做位移动画。
为什么 addEventListener('scroll') 在长列表里卡顿
因为每次滚动都触发，且默认同步执行，JS 主线程被高频占用，尤其在低端机或复杂 DOM 下，帧率直接掉到 10fps 以下。而 IntersectionObserver 是异步、低优先级、由浏览器调度的，不会阻塞渲染。
真实场景中，比如无限滚动列表里每项都要“懒加载图片+渐显文字”，用 scroll 监听会立刻感受到卡顿；换成 Observer 后，只有真正进入视口的那几项才被通知，其余完全不参与计算。
- 滚动事件无法区分“用户正在滑”和“已经停住”，常要自己加防抖，但防抖又会导致动画延迟或错过首帧
- Observer 的
isIntersecting字段明确告诉你“现在是否可见”，比手动算getBoundingClientRect()精准且省事 - 如果必须兼容 IE，可用
scroll+requestIdleCallback降级，但别在回调里做 DOM 修改，只标记状态，留到空闲时批量更新
rootMargin 怎么设置才能提前触发动画
rootMargin 是模拟“扩大视口边界”的参数，格式类似 CSS margin："100px 0px 0px 0px" 表示上边距扩展 100px，元素还没真正滚进屏幕，Observer 就认为它“即将可见”。这是实现“预加载动画”的核心配置。
例如想让卡片在离顶部还有 150px 时就开始淡入，就设 rootMargin: "150px 0px 0px 0px"。但要注意：
- 值为字符串，不能写成数字或带单位的数组；负值（如
"-50px"）表示收缩边界，适合做“完全进入才触发” - 在
position: fixed导航栏下，必须设rootMargin抵消导航高度，否则动画总晚一拍 - SSR 渲染的页面，服务端没视口概念，
rootMargin不生效，需客户端 hydrate 后再初始化 Observer
复杂点在于，不同设备像素比、缩放级别、甚至 Chrome 的“Smooth Scrolling”开关都会影响实际触发时机，上线前务必在真机上滚动测试几次——动画早了显得突兀，晚了用户已划走。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
