1
class ReadingProgress {
2
    constructor() {
3
      this.progressBar = null
4
      this.observer = null
5
      this.lastHeight = 0
6
      this.init()
7
      this.bindPjaxEvents()
8
    }
9

10
    // 初始化进度条
11
    init() {
12
      // 创建或复用进度条元素
13
      this.progressBar = document.querySelector('.read-progress') ||
14
        Object.assign(document.createElement('div'), {className: 'read-progress'})
15

16
      if (!document.contains(this.progressBar)) {
17
        document.body.appendChild(this.progressBar)
18
      }
19

20
      // 动态计算参数
21
      this.calculatePageHeight()
22
      this.bindScrollEvent()
23
      this.bindResizeObserver()
24
    }
25

26
    // 计算页面实际高度并更新进度条
27
    calculatePageHeight() {
28
      //检测页面高度是否变化
29
      if (this.lastHeight != document.body.scrollHeight){
30
        this.pageHeight = document.body.scrollHeight
31
        this.lastHeight = this.pageHeight
32
        let progress = (document.documentElement.scrollTop / (this.pageHeight - window.innerHeight)) * 100
33
        this.progressBar.style.width = Math.min(progress, 100).toFixed(1) + '%'
34
      }
35
    }
36

37
    // 滚动事件处理
38
    bindScrollEvent() {
39
      let isScrolling;
40
      const updateProgress = () => {
41
        // 滚动高度 / (页面高度 - 视口高度) * 100
42
        let progress = (document.documentElement.scrollTop / (this.pageHeight - window.innerHeight)) * 100
43
        this.progressBar.style.width = Math.min(progress, 100).toFixed(1) + '%'
44
        isScrolling = false
45
      };
46

47
      window.addEventListener('scroll', () => {
48
        if (!isScrolling) {
49
          window.requestAnimationFrame(()=>{
50
            setTimeout(updateProgress,50) //节流
51
          })
52
          isScrolling = true
53
        }
54
      });
55
    }
56

57
    // 监听DOM变化
58
    bindResizeObserver() {
59
      this.observer = new MutationObserver(() => {
60
        this.calculatePageHeight()
61
      });
62

63
      this.observer.observe(document.querySelector(".layout"), { //这里设置成某个页面元素或者整个页面
64
        childList: true,
65
        subtree: true,
66
        attributes: true
67
      });
68
    }
69

70
    // 销毁旧监听（Pjax切换时）
71
    destroy() {
72
      window.removeEventListener('scroll', this.handleScroll)
73
      if (this.observer) this.observer.disconnect()
74
    }
75

76
    // Pjax事件绑定
77
    bindPjaxEvents() {
78
      document.addEventListener('pjax:send', () => this.destroy())
79
      document.addEventListener('pjax:complete', () => this.init())
80
    }
81
  }
82

83
  // 初始化阅读进度条
84
  document.addEventListener('DOMContentLoaded', () => {
85
    new ReadingProgress()
86
  });

1
.read-progress {
2
  position: fixed;
3
  top: 0;
4
  left: 0;
5
  height: 2px;
6
  z-index: 100;
7
  width: 0%;
8
  background: #26ff84b6;
9
  transition: width .1s;
10
  transform-origin: left;
11
}

1
::-webkit-scrollbar {
2
  display: none;
3
}
4
html{
5
  scrollbar-width: none;
6
  -ms-overflow-style: none;
7
}