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

  

 

  
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
 

index.html

<link rel="stylesheet" href="./style.css" />

    <!-- 进度条 -->
    <div class="progress-bar-wrap">
      <div class="progress-bar"></div>
    </div>

<script src="./script.js"></script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

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;
}


  

 

  
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
 

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 + "%";
  });
})();


  

 

  
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
 

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

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

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/126987435