JavaScript通过onscroll实现页面顶部进度条效果

无意中浏览网页看到在鼠标向下滑动页面时，页面顶部以进度条的方式展示效果，在这里记录下自己玩玩。

使用场景：页面头部（header）绝对定位（absolute 或 fixed）或粘性定位（sticky）悬浮或固定的情况下，通过CSS渲染其展示效果，一定程度改善用户体验效果。

实现方法：首先获取三个值：页面总高度、可视高度及其可滚动高度，通过onscroll事件执行样式即可。

获取相关参数值：

let pageHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
let scrollAvail = pageHeight - windowHeight;

在顶部区域需要展示的地方定义标签样式。e.g .

在所要展示的地方定义标签，绑定CSS，设置高度一定值，默认宽度为0即可

下面是PUG,SCSS写法演示

div.scrollBar

.scrollBar{
  position: absolute;
  left:0;
  bottom:0;
  background-color:rgba($color: #0084ff, $alpha: .25);
  width:0;
  height:2px;
}

然后我们在JavaScript中执行方法即可

标签元素宽度在滚动事件触发时 = (滚动条高度/可滚动高度)*100   '%';

function scrollBar() {
  let pageHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
  let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
  let scrollAvail = pageHeight - windowHeight;
  window.onscroll = function () {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      document.querySelector('.scrollBar').style.width = (scrollTop/scrollAvail)*100   '%';
  };
}

另外，浏览器窗口变更时，我们可以通过onresize属性resize事件去再次执行它，以免溢出。

window.onresize = () => scrollBar();

最终完整的如下：

scrollBar();
window.onresize = () => scrollBar();
function scrollBar() {
  let pageHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
  let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
  let scrollAvail = pageHeight - windowHeight;
  window.onscroll = function () {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      document.querySelector('.scrollBar').style.width = (scrollTop/scrollAvail)*100   '%';
  };
}