求助：JavaScript滚动动画添加单次执行条件后页面区块异常问题

问题描述 #

为JavaScript滚动触发的fade函数添加了仅执行一次的控制条件（通过count变量实现），但添加该if-else逻辑后，网页的所有区块均出现异常展开的情况。原代码逻辑如下：

let count = 0;
window.addEventListener('scroll', fade);
function fade()
{
  if (count < 1)
  {
    let animation=document.querySelectorAll('.fade');
    for (let i=0; i<animation.length; i++)
    {
      let windowheight=window.innerHeight;
      let top=animation[i].getBoundingClientRect().top;
      if (top < windowheight)
      {
      animation[i].classList.add('visible');
      }
      else
      {
      animation[i].classList.remove('visible');
      }    
    }
  }
  else
  {
    return ;
  }
  count++;
}

问题原因 #

原代码通过全局count变量限制整个fade函数仅执行一次，这会导致：

• 第一次滚动触发时，函数仅执行一轮循环，之后所有滚动事件都直接返回，不再处理元素的视口状态变化
• 若页面加载时部分.fade元素不在视口内，第一次执行时会被移除visible类，后续滚动到这些元素时无法重新添加；反之，若初始时部分元素误判为在视口内，也会被错误添加类，且无法修正
• 这种全局单次执行的逻辑完全违背了滚动触发动画的核心需求——根据元素实时视口状态动态调整样式

修复方案 #

如果需求是每个元素进入视口后仅触发一次fade动画，应该给每个元素单独标记是否已完成动画，而非限制整个函数执行次数。修改后的代码如下：

window.addEventListener('scroll', fade);
function fade()
{
  let animations = document.querySelectorAll('.fade:not(.animated)');
  for (let anim of animations)
  {
    let windowHeight = window.innerHeight;
    let elementTop = anim.getBoundingClientRect().top;
    // 当元素顶部进入视口（或距离视口顶部一定距离时）触发动画
    if (elementTop < windowHeight * 0.9) {
      anim.classList.add('visible', 'animated');
    }
  }
}

// 页面加载时先执行一次，避免初始在视口内的元素不触发动画
fade();

关键修改点 #

• 移除全局count变量，改为用animated类标记已完成动画的元素，通过:not(.animated)筛选未处理的元素
• 使用for...of循环简化遍历逻辑
• 调整触发阈值为窗口高度的90%，让元素接近视口时就触发动画，提升体验
• 页面加载时主动执行一次fade()，确保初始在视口内的元素能正常显示动画

额外优化（可选） #

当所有元素都完成动画后，可以移除滚动事件监听，避免不必要的性能消耗：

function fade()
{
  let animations = document.querySelectorAll('.fade:not(.animated)');
  if (animations.length === 0) {
    window.removeEventListener('scroll', fade);
    return;
  }
  
  for (let anim of animations)
  {
    let windowHeight = window.innerHeight;
    let elementTop = anim.getBoundingClientRect().top;
    if (elementTop < windowHeight * 0.9) {
      anim.classList.add('visible', 'animated');
    }
  }
}

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