实现原理
// 距顶部
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
<link rel="stylesheet" href="./style.css" />
<!-- 进度条 -->
<div class="progress-bar-wrap">
<div class="progress-bar"></div>
</div>
<script src="./script.js"></script>
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