滚动淡入上移特效（IntersectionObserver 自研，时长/偏移/阈值可调）

效果演示（真实可交互）

演示区用内嵌滚动容器模拟页面滚动；正式使用时把同样的 HTML/CSS/JS 放到你的页面里，即可作用于真实页面滚动。

完整代码

<div class="reveal"><h4>标题</h4><p>内容</p></div>
<div class="reveal" style="--d:120"><h4>标题</h4><p>内容</p></div>

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: calc(var(--d, 0) * 1ms); /* 通过 --d 实现逐个错峰 */
}
.reveal.in { opacity: 1; transform: none; }

const observer = new IntersectionObserver(entries => {
  for (const en of entries) {
    if (en.isIntersecting) {
      en.target.classList.add('in');
      observer.unobserve(en.target); // 一次性触发，不再重复观察
    }
  }
}, { threshold: 0.15 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

三行 CSS + 十行 JS 即可复刻完整效果。想作用于某个滚动容器（如侧边栏），给 IntersectionObserver 传 root: 容器元素 即可。

参数说明

兼容性与性能

• IntersectionObserver 为浏览器原生 API，Chrome 51+ / Safari 12.1+ / Firefox 55+ / Edge 15+ 全支持，无需 polyfill
• 观察回调只执行一次 classList.add，零性能压力；相比监听 scroll 事件 + 手算位置，方案更省资源且不会与滚动条抖动互相干扰
• 动画只作用于 opacity 与 transform 两个可合成属性，GPU 加速不卡顿
• 元素初始 opacity: 0，若担心 JS 加载失败导致内容不可见，可加 <noscript> 兜底或把初始态改为可见

常见问题

Q: 和 ScrollReveal / AOS 这类库比有什么优势？ 零依赖、零学习成本，完整实现不足 20 行；ScrollReveal 已被列入本组件站禁用清单（License 风险），AOS 虽在安全池，但其核心机制就是 IntersectionObserver，自己写同样简单且无版本包袱。

Q: 为什么我的元素刷新后不出现？ 最常见原因是元素在 JS 执行时已经在视口内但 observer 未触发——实际上 observer 对已在视口内的元素会立即回调一次，请检查是否把 root 设成了别的容器、或阈值设得太高（如 0.9）。

Q: 想要元素滑入后还能再次滑出（重复触发）怎么做？ 去掉 observer.unobserve(en.target)，并在元素离开视口时移除 in 类：else { en.target.classList.remove('in'); }。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创（思路参考 AOS 但代码完全独立实现），免费商用无需署名。