介绍

页面滚动顶部指示，是在页面上下滚动时，顶部显示一个滚动条，指示页面的滚动距离和页面的滚动高度的比例。效果如下：

CPT2209131004-668x576-min.gif

JS 实现

原理是顶部放一个宽度为 0 的滚动条，然后监听窗口滚动事件，把页面的滚动距离和页面的滚动高度（页面的实际高度 - 页面的视口高度）进行比较，然后更新滚动条的宽度。

1
2
3
4
window.onscroll = function(e) {
  var height = document.scrollingElement.scrollHeight - document.scrollingElement.clientHeight;
  progressBar.style.width = (document.scrollingElement.scrollTop / height) * 100 + "%";
}
1
2
3
4
5
6
7
8
9
10
11
12
.progress-container {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(0, 0, 0, .1);
}

.progress-bar {
  width: 0;
  height: 8px;
  background: rgba(0, 200, 0, .7);
}

CSS 实现

原理是给页面添加一个线性渐变的背景，背景的宽度等于页面的宽度，背景的高度要等于页面的滚动高度（页面的实际高度 - 页面的视口高度），这可以使用 CSS 的函数 calc(100% - 100vh) 来得到，然后加上滚动条的高度，比如 5px，calc(100% - 100vh + 5px)。

1
2
3
4
body {
  background: linear-gradient(to top right, lime 50%, white 50%) no-repeat;
  background-size: 100% calc(100% - 100vh + 5px);
}

这里使用 linear-gradient 函数创建了一个两种颜色的渐变色，在 50% 位置共享一个颜色停止点，即渐变的一半。这将在两种颜色之间创建一条硬线，即创建一个条纹而不是逐渐过渡。

CPT2209131207-1349x1029-min.gif

接下来就是把多余背景遮盖，可以使用伪元素来完成：

1
2
3
4
5
6
7
8
9
10
body::after {
  content: "";
  position: fixed;
  top: 5px;
  left: 0;
  bottom: 0;
  right: 0;
  background: white;
  z-index: -1;
}

这种方法的滚动条不能太高，不然滚动条末端的倾斜条纹会很明显。

以上的 JS 和 CSS 实现在 IE11 中都有效果。