CSS 如何实现页面滚动进度条？

Question

CSS 如何实现页面滚动进度条？

仓乃文 · Accepted Answer

利用线性渐变配合背景尺寸计算，可以纯 CSS 实现页面顶部滚动进度条效果，无需任何 JavaScript。

```css
body {
  background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
  background-size: 100% calc(100% - 100vh + 5px);
  background-repeat: no-repeat;
}

body::after {
  content: ";
  position: fixed;
  top: 5px;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  z-index: -1;
}
```

补充说明：
- calc(100% - 100vh + 5px) 减去一个屏幕高度，确保滚动到底部时进度条也到头
- + 5px 是进度条的高度，可根据需要调整
- 伪元素 z-index: -1 遮住多余渐变区域，只露出顶部进度条
- 如果页面有其他固定元素需注意层级关系