页面滚动进度条特效（自研 JS，颜色/高度/位置实时可调）

效果演示（真实可交互）

演示区用内嵌滚动容器模拟长页面；正式使用时代码不变，只需把监听对象从容器换成 window 或 document.documentElement。

完整代码

<div class="progress-bar" id="progressBar"></div>
<!-- 长页面内容省略 -->

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 5px;
  background: linear-gradient(90deg, #6c8cff, #a96cff, #ff8ecf);
  box-shadow: 0 0 10px rgba(108, 140, 255, .6);
  z-index: 9999;
}

const bar = document.getElementById('progressBar');

function update() {
  const doc = document.documentElement;
  const max = doc.scrollHeight - doc.clientHeight;
  const pct = max > 0 ? doc.scrollTop / max : 0;
  bar.style.width = (pct * 100).toFixed(2) + '%';
}
window.addEventListener('scroll', update, { passive: true });
window.addEventListener('resize', update);
update();

核心公式只有一行：进度 = scrollTop / (scrollHeight - clientHeight)。容器内滚动（模态框/侧边栏）时，把 doc 换成 容器元素、window 换成容器即可。

参数说明

兼容性与性能

• 使用 addEventListener('scroll', ..., { passive: true }) 被动监听，不阻塞滚动线程，即使高频触发也无卡顿
• 每帧只更新一次 width（toFixed(2) 避免浮点抖动），浏览器按合成层处理宽度变化，开销可忽略
• 进度计算做了 max > 0 保护，内容不满一屏时进度恒为 0，不会出现 NaN 或负值
• 全浏览器兼容（Chrome / Safari / Firefox / Edge / iOS / Android），无需任何 polyfill

常见问题

Q: 和现成的进度条库比有必要自研吗？ 完全没必要用库。整个功能只有一行核心公式，第三方库反而引入体积与版本风险；本组件为粤喵自研，含演示共约 30 行代码。

Q: 在 iOS Safari 上进度条会跳吗？ iOS 的橡皮筋回弹会让 scrollTop 短暂为负，建议在公式外包裹 Math.max(0, ...)；本组件演示中的容器滚动同样适用该保护。

Q: 如何把进度条放进某个区块而不是全屏固定？ 把 position: fixed 改为 position: sticky; top: 0，并把滚动监听目标换成该区块的滚动容器即可；块内进度条常用于文章页、文档站。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，免费商用无需署名，无任何协议限制。