如何用Web API库替换JS滚动淡入淡出动画的高度计算逻辑

原代码通过监听scroll事件并手动计算元素位置来触发动画，但这种方式会因scroll事件高频触发带来不必要的性能损耗。我们可以用浏览器原生的Intersection Observer API来实现完全相同的触发逻辑，代码更简洁且性能更优。

重构后的完整代码 #

const fadeElements = document.querySelectorAll('.fade');

// 创建Intersection Observer实例
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 匹配原逻辑：元素进入触发区域时添加类，离开时移除
    entry.target.classList.toggle('visible', entry.isIntersecting);
  });
}, {
  // rootMargin设置等价于原逻辑的+20偏移量：将视口底部向上收缩20px
  rootMargin: '0px 0px -20px 0px',
  threshold: 0
});

// 开始观察所有目标元素
fadeElements.forEach(el => observer.observe(el));

逻辑对应说明 #

原代码中的核心判断：

let height = j.getBoundingClientRect().top - window.innerHeight + 20; 
if (height < 0) { /* 添加visible类 */ }

本质是当元素顶部距离视口底部的距离小于20px时触发动画。

在Intersection Observer的配置中：

• rootMargin: '0px 0px -20px 0px' 表示把视口的底部边界向上收窄20px，元素进入这个调整后的视口区域时，就会被判定为isIntersecting = true，完全匹配原逻辑的触发条件。
• threshold: 0 表示元素只要有1px进入观察区域就触发回调，和原逻辑的触发时机完全一致。

优势对比 #

• 无需手动计算元素位置，代码更简洁易维护
• 异步触发机制，不会在scroll事件中频繁执行计算，避免页面卡顿
• 自动处理初始页面加载时的元素可见性判断，无需额外调用初始化函数

内容的提问来源于stack exchange，提问作者engr. hasnat