js：监听页面滚动scroll，实现阅读进度条

实现原理

// 距顶部
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

// 可视区高度
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

// 滚动条总高度
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;


// 滚动到顶部
scrollTop == 0

// 滚动到底部
scrollTop == scrollHeight - clientHeight

index.html

style.css

body {
  height: 200vh;
}

.progress-bar-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ddd;
}

.progress-bar {
  position: absolute;
  left: 0;
  height: 100%;
  content: "";
  background-color: #0089f2;
}

script.js

(function () {
  let progressBar = document.querySelector(".progress-bar");
  
  document.addEventListener("scroll", function (e) {
    // 距顶部
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 可视区高度
    var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    // 滚动条总高度
    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

    console.log(scrollTop, scrollHeight, clientHeight);

    progressBar.style.width =
      +(scrollTop / (scrollHeight - clientHeight)).toFixed(2) * 100 + "%";
  });
})();

在线体验: https://mouday.github.io/front-end-demo/progress-bar/index.html

参考 CSS实现阮大佬博文的阅读进度功能