如何通过JavaScript实现滚动进度指示器？-js教程-PHP中文网

如何通过JavaScript实现滚动进度指示器？

幻影之瞳

发布： 2025-09-17 15:24:01

原创

326人浏览过

通过监听滚动事件并计算滚动百分比，结合CSS自定义进度条样式，可实现页面滚动进度指示器；为应对动态内容，使用MutationObserver重新计算进度；通过节流优化滚动事件性能。

如何通过javascript实现滚动进度指示器？

滚动进度指示器，简单来说，就是页面滚动时，顶端或底部出现一条进度条，告诉你当前阅读到了哪个位置。实现起来并不复杂，JavaScript就能搞定。

先监听滚动事件，然后根据滚动距离和页面总高度计算出进度百分比，最后更新进度条的宽度或高度即可。

window.addEventListener('scroll', function() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  const scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100;

  // 获取进度条元素，这里假设id是"progress-bar"
  const progressBar = document.getElementById('progress-bar');

  // 更新进度条宽度
  progressBar.style.width = scrollPercent + '%';
});

登录后复制

如何自定义滚动进度条的样式？

自定义样式是必须的，不然就太单调了。CSS才是灵魂。可以修改颜色、高度、位置等等。

#progress-bar {
  position: fixed; /* 固定在顶部或底部 */
  top: 0; /* 顶部 */
  left: 0;
  width: 0%;
  height: 5px; /* 高度 */
  background-color: red; /* 颜色 */
  z-index: 1000; /* 确保在最上层 */
}

登录后复制

还可以加点过渡效果，让进度条变化更平滑。比如：

立即学习“Java免费学习笔记（深入）”；

#progress-bar {
  transition: width 0.3s ease-in-out;
}

登录后复制

如何处理内容高度动态变化的页面？

有些页面内容是动态加载的，高度会变，那之前的计算方法就不准了。需要在内容加载完成后重新计算。

v0.dev

Vercel推出的AI生成式UI工具，通过文本描述生成UI组件代码

232

查看详情

比如，用MutationObserver监听内容变化：

const observer = new MutationObserver(function(mutations) {
  // 重新计算进度
  updateProgressBar();
});

// 监听body的变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});

function updateProgressBar() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  const scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100;
  const progressBar = document.getElementById('progress-bar');
  progressBar.style.width = scrollPercent + '%';
}

登录后复制

如何避免滚动事件频繁触发导致的性能问题？

滚动事件触发频率很高，每次滚动都计算和更新DOM，性能消耗很大。需要节流或防抖。

用节流：

function throttle(func, delay) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    if (!timeout) {
      timeout = setTimeout(function() {
        func.apply(context, args);
        timeout = null;
      }, delay);
    }
  }
}

window.addEventListener('scroll', throttle(function() {
  // 滚动处理逻辑
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  const scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100;
  const progressBar = document.getElementById('progress-bar');
  progressBar.style.width = scrollPercent + '%';
}, 100)); // 100毫秒节流

登录后复制

防抖类似，只不过是延迟执行，直到停止滚动一段时间后才执行。选择哪个取决于具体需求。

以上就是如何通过JavaScript实现滚动进度指示器？的详细内容，更多请关注php中文网其它相关文章！