如何解决JavaScript滚动进度条动画中的变量重置问题？

我正在实现一个滚动触发的进度条动画：当滚动到指定元素位置时，进度条宽度从0递增到78%。但现在的问题是，每次滚动到同一触发高度时，进度条宽度都会被重置，而且会重复创建定时器导致动画异常。我知道这是因为range变量在scroll事件回调里每次都被重新赋值为0，但不知道怎么修复，尝试过闭包但没能成功应用。

核心问题分析 #

你的代码存在两个关键问题：

• range变量在scroll事件回调内部声明，每次触发scroll都会重新初始化为0，导致进度被强制重置
• 每次滚动到阈值位置都会创建新的setInterval定时器，多个定时器同时修改进度条，造成动画跳变、混乱

修复方案一：使用闭包封装状态（推荐，避免全局变量污染） #

把进度值、定时器实例等状态封装在闭包中，确保状态不会在每次scroll回调时被重置，同时避免全局变量污染：

const SEORange = document.getElementById("SEO");

// 用立即执行函数创建闭包，封装动画状态
const initSEOProgress = (() => {
  let range = 0;
  let animationInterval = null;
  // 常量统一定义在闭包内，避免重复创建
  const TARGET_WIDTH = 78;
  const INCREMENT_INTERVAL = 10;
  const SCROLL_THRESHOLD = 0.905;
  const INCREMENT_STEP = 1;

  return () => {
    const top = SEORange.getBoundingClientRect().top;
    // 触发条件：达到滚动阈值、进度未完成、无运行中定时器
    if (top < window.innerHeight * SCROLL_THRESHOLD && range < TARGET_WIDTH && !animationInterval) {
      animationInterval = setInterval(() => {
        if (range >= TARGET_WIDTH) {
          clearInterval(animationInterval);
          animationInterval = null; // 重置定时器状态，允许后续（如果需要）重新触发
        } else {
          range += INCREMENT_STEP;
          SEORange.style.width = range + "%";
        }
      }, INCREMENT_INTERVAL);
    }
  };
})();

// 绑定滚动事件
window.addEventListener("scroll", initSEOProgress);

修复方案二：使用模块级变量保存状态（更简洁） #

如果不介意少量全局状态，可以直接把状态变量放在scroll事件回调外部，同样能解决问题：

const SEORange = document.getElementById("SEO");
let range = 0;
let animationInterval = null;
// 常量定义
const TARGET_WIDTH = 78;
const INCREMENT_INTERVAL = 10;
const SCROLL_THRESHOLD = 0.905;
const INCREMENT_STEP = 1;

window.addEventListener("scroll", () => {
  const top = SEORange.getBoundingClientRect().top;
  // 确保只有满足所有条件时才启动动画
  if (top < window.innerHeight * SCROLL_THRESHOLD && range < TARGET_WIDTH && !animationInterval) {
    animationInterval = setInterval(() => {
      if (range >= TARGET_WIDTH) {
        clearInterval(animationInterval);
        animationInterval = null;
      } else {
        range += INCREMENT_STEP;
        SEORange.style.width = range + "%";
      }
    }, INCREMENT_INTERVAL);
  }
});

关键优化说明 #

• 状态持久化：将range和animationInterval移出scroll回调，确保每次滚动时能读取到当前进度，不会被重置
• 防止重复触发：增加!animationInterval判断，避免同一时间创建多个定时器，防止动画跳变
• 完成后清理：进度达到目标时清除定时器并重置状态，避免后续滚动触发无效操作

原CSS与HTML代码（无需修改） #

* {
  height: 100vh;  /* Added height to see what happens when scrolling */
}

#section2-text-container {
  justify-content: end;
  flex-basis: 50%;
  margin-top: 5%;
}

#section2-text-container form {
  margin-top: 10%;
}

.range-container {
  background-color: #000000;
  border-radius: 0 10px 10px 0;
  width: 90%;
  height: 8px;
  position: relative;
}

#section2-text-container input {
  appearance: none;
  -webkit-appearance: none;
  background-color: #64bfd2;
  width: 0;
  height: 4px;
  margin: 0 5% 0 0;
  position: absolute;
  inset: 0 0 0 0;
}

#section2-text-container input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 0px;
  background: #010101;
  height: 0px;
}

#section2-text-container input::-moz-range-thumb {
  width: 0px;
  background: #04aa6d;
}

<!DOCTYPE html>
<html>
  <body>
    <div id="section2-text-container">
      <form>
        <label for="SEO">SEO</label><br><br>
        <div class="range-container">
          <input id="SEO" disabled type="range" value="0" />
        </div>
      </form>
    </div>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Erfan Ta