<style>
* {
padding: 0;
margin: 0;
}
.progressbar {
height: 5px;
background: skyblue;
width: 0%;
position: fixed;
top: 0;
left: 0;
}
</style>
<body>
<div class="progressbar">
</div>
<div style="height: 2000px;"></div>
<script>
window.onscroll = () => {
//浏览器的窗口是window 内容放在body里面 二者相减得到的是最大的scrollTop
//因为是进度条 所以需要给进度条的宽度改成百分比 但是这里需要定位 宽度不显示
let max = document.body.offsetHeight - window.innerHeight;
let scrollTop = Math.ceil(document.documentElement.scrollTop)
let percent = (scrollTop / max) * 100 + "%"
document.querySelector('.progressbar').style.width = percent
}
</script>
</body>