以下是如何完成滚动进度条，该进度条会随着您滚动浏览站点页面而前进。这是传达进度指示器的好方法，让读者了解他们在帖子中的进展情况。

它利用了CSS Variables的强大功能，该解决方案改编自Lea Verou 的精彩演讲的一部分。

首先，在打开 body 标签之后添加以下标记：

<div class="progress"></div>

然后用这样的东西来设计这个.progress元素：

.progress {
  background: linear-gradient(to right, #F9EC31 var(--scroll), transparent 0);
  background-repeat: no-repeat;
  position: fixed;
  width: 100%;
  height: 4px;
  z-index: 1;
}

注意在线性渐变中我们如何引用一个名为 的 CSS 变量--scroll，它将在滚动时被赋予一个值。

这意味着剩下要做的就是侦听文档的滚动事件并--scroll使用滚动百分比设置自定义属性的值。我们为此使用element.style.setProperty。该.progress元素将得到一个内联价值--scroll，一旦它被设定。

感谢Phil Ricketts和他对这个StackOverflow 问题的解决方案，提供了一种计算文档滚动百分比的准确方法：

var h = document.documentElement,
  b = document.body,
  st = 'scrollTop',
  sh = 'scrollHeight',
  progress = document.querySelector('.progress'),
  scroll;

document.addEventListener('scroll', function() {
  scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
  progress.style.setProperty('--scroll', scroll + '%');
});

👉 注意 IE 或 Edge 目前不支持 CSS 自定义属性。然而，支持即将到来，同时该功能会优雅地降级。