滚动效果仅触发一次实现咨询：图文淡入滚动效果重复触发延迟问题

方案选型说明 #

两种技术栈都可以实现需求，你可以根据项目兼容性要求选择： #

1. CSS 实现方案 #

适合不需要兼容旧版浏览器的场景，代码量少无需额外逻辑。
通过CSS滚动驱动动画实现，设置动画播放完成后保持最终状态，自动避免重复触发：

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  /* 动画配置：播放一次后保持结束状态 */
  animation: fadeIn 0.6s linear forwards;
  /* 绑定视口滚动 timeline */
  animation-timeline: view();
  /* 元素露出10%到进入30%的区间播放动画 */
  animation-range: entry 10% cover 30%;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

兼容性说明：支持Chrome 115+、Edge 115+、Safari 17.4+版本浏览器

2. JavaScript 实现方案 #

兼容性更广、逻辑可控性更强，是目前生产环境的主流方案。
通过IntersectionObserver监听元素进入状态，首次触发后添加标记并停止监听，从根源上避免重复执行动画逻辑：

样式代码

.fade-element {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}
/* 动画触发后永久保持最终状态 */
.fade-element.activated {
  opacity: 1;
  transform: translateY(0);
}

逻辑代码

const fadeObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 仅元素首次进入视口时触发动画
    if (entry.isIntersecting && !entry.target.classList.contains('activated')) {
      entry.target.classList.add('activated');
      // 移除已触发元素的监听，减少性能消耗
      fadeObserver.unobserve(entry.target);
    }
  })
}, {
  threshold: 0.1 // 元素露出10%时触发
})

// 绑定所有需要淡入效果的元素
document.querySelectorAll('.fade-element').forEach(el => {
  fadeObserver.observe(el)
})

补充说明 #

你之前遇到的回滚时触发延迟的问题，本质是动画逻辑每次元素进入视口都重复执行、状态反复重置导致的，以上两种单次触发方案都可以直接解决该问题。

内容的提问来源于stack exchange，提问作者s-mostafa-d