JS 实现页面内容浏览进度条

🖥️ 效果演示

🛠️ 实现代码

HTML

<div class="read_pro">
   <div class="read_pro_inner" id="read_pro_inner">
   </div>
</div>

CSS

body {
   height: 100%;
}

.read_pro {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background-color: #DDD;
}

.read_pro_inner {
   content: '';
   position: absolute;
   left: 0;
   height: 100%;
   background-color: #0089f2;
}

JS

document.addEventListener('scroll', function(e) {
   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 已经读过被卷起来的文档部分
   var scrollHeight = document.documentElement.scrollHeight // 文档总高度
   var clientHeight = document.documentElement.clientHeight // 窗口可视高度
   document.getElementById('read_pro_inner').style.width = +(scrollTop/(scrollHeight-clientHeight)).toFixed(2)*100 + '%'
})

🔗 原文引用

https://blog.csdn.net/tt18473481961/article/details/121625928