18. 滚动效果：IntersectionObserver 滚动淡入

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

向下滚动查看卡片逐个淡入。

三、知识点提醒

相比频繁监听 scroll，IntersectionObserver 更适合进入视口检测。
`threshold` 表示元素可见比例达到多少时触发。
触发一次后 `unobserve` 可以减少后续计算。

四、练习建议

做一个图片懒加载示例。
让卡片按不同延迟出现。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/18-scroll-intersection.js，下面同步展示，方便学习和复制。

// 页面 18：IntersectionObserver 实现滚动淡入
const revealList = document.querySelector('#p18-list');
const revealItems = [
  '更少的滚动监听代码',
  '浏览器优化性能更好',
  '适合图片懒加载',
  '适合卡片进入视口动画',
  '可以设置触发阈值',
  '可以只触发一次后停止观察'
];

revealList.innerHTML = revealItems.map((text, index) => `
  <article class="item-card reveal">
    <h4>优势 ${index + 1}</h4>
    <p>${text}</p>
  </article>
`).join('');

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      observer.unobserve(entry.target);
    }
  });
}, {
  threshold: 0.25,
  rootMargin: '0px 0px -40px 0px'
});

document.querySelectorAll('.reveal').forEach((element) => {
  observer.observe(element);
});