实现滚动入场动画仅触发一次：active类添加后永久保留不被移除

你当前代码里的else分支会在元素离开视口时主动移除active类，这是类名无法保留的直接原因。只要删除这段移除类名的逻辑，就能实现首次添加后永久保留的效果。

最小修改版本 #

直接删掉原代码中else块的内容即可，完整代码如下：

function reveal() {
  var reveals = document.querySelectorAll(".reveal");

  for (var i = 0; i < reveals.length; i++) {
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 20;

    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    }
  }
}

window.addEventListener("scroll", reveal);
// 首次加载时主动执行一次，避免首屏内的.reveal元素需要等滚动才触发激活
reveal();

性能优化版本 #

如果页面内.reveal元素较多，可以在元素激活后直接跳过后续判断，所有元素都激活完成后还可以直接移除滚动监听，减少不必要的性能消耗：

function reveal() {
  // 只查询还没被激活的元素
  var reveals = document.querySelectorAll(".reveal:not(.active)");
  
  // 所有元素都已经激活，移除滚动监听终止逻辑
  if (reveals.length === 0) {
    window.removeEventListener("scroll", reveal);
    return;
  }

  for (var i = 0; i < reveals.length; i++) {
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 20;

    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    }
  }
}

window.addEventListener("scroll", reveal);
reveal();

说明：classList.add方法本身自带判断逻辑，如果元素已经持有目标类名，重复调用不会产生副作用，不需要额外加判断去重。

内容的提问来源于stack exchange，提问作者Sam Zack