WordPress站点Scroll Indicator无法正常工作求助

我正在为博客页面开发滚动指示器，几个月前尝试实现时遇到问题搁置，后来解决了，但今天再次使用时功能又失效了。手动修改进度条的width属性（从0%改成其他值）时，金色的进度线条能正常显示，所以可以确定问题出在JS代码部分，参考的是W3Schools的滚动指示器教程。

我使用的代码如下： #

HTML

<div class="progress-container">
    <div class="progress-bar" id="Scroll_Indicator_blog"></div>
</div>

JavaScript

// scroll bar script
window.onscroll = function () {
    Scroll_Indicator_blog_function()
};

function Scroll_Indicator_blog_function() {
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 100;
    document.getElementById("Scroll_Indicator_blog").style.width = scrolled + "%";
}

CSS

.progress-container {
    position: fixed;
    top: 0;
    display: block;
    width: 100%;
    height: 8px;
    background: var(--vesal-background-color7);
    z-index: 9999;
}
.progress-bar {
    height: 100%;
    background: var(--vesal-background-color2);
    box-shadow: 0 5px 10px 0 var(--vesal-boxshadow-color-1);
    width: 0%;
    transition: ease-in-out 0.5s;
}

修复方案： #

• 确保DOM加载完成后再执行JS
  如果JS代码在页面元素加载前运行，getElementById会返回null，导致无法修改进度条宽度。把代码放到DOMContentLoaded事件中，同时初始化时执行一次函数避免进度条停留在0：

  document.addEventListener('DOMContentLoaded', function() {
      window.addEventListener('scroll', Scroll_Indicator_blog_function);
      Scroll_Indicator_blog_function(); // 初始化进度
  });
  
  function Scroll_Indicator_blog_function() {
      const progressBar = document.getElementById("Scroll_Indicator_blog");
      if (!progressBar) return; // 元素不存在时直接返回
  
      const doc = document.documentElement;
      const winScroll = doc.scrollTop || window.pageYOffset || document.body.scrollTop;
      const height = doc.scrollHeight - doc.clientHeight;
      const scrolled = height > 0 ? (winScroll / height) * 100 : 0; // 避免除以0
  
      progressBar.style.width = `${scrolled}%`;
  }
  

• 避免滚动事件被覆盖
  直接赋值window.onscroll会覆盖其他地方的滚动事件监听，改用addEventListener可以避免冲突，同时支持多个滚动事件处理函数。

• 处理滚动高度计算的兼容性
  不同浏览器对滚动高度的获取方式有差异，合并多种获取方式能提升兼容性。

• 检查CSS变量有效性
  确认--vesal-background-color7、--vesal-background-color2等CSS变量已在全局或父元素中正确定义，避免动态修改时出现样式异常。

内容的提问来源于stack exchange，提问作者محمد مهدی زارعی