在vue專案中做一個類似ECMAScript 6 入門的頁面進度條

1.先在頁面設定一個div

<div id="progress-bar"></div>

2.設定樣式，使其固定在頁面頂部。

#progress-bar{
  height: 5px;
  background-color: #42b983;
  position: fixed;
  top: 0;
  left: 0;
}

3.再給頁面滾動新增監聽器

mounted () {
    window.addEventListener('scroll', this.getBarWidth)
},
destroyed () {
    window.removeEventListener('scroll', this.getBarWidth)
},
 

4.獲取進度條寬度

getBarWidth () {
      let barWidth = document.documentElement.scrollTop / (document.body.scrollHeight -                		document.body.clientHeight) * document.body.offsetWidth
      document.getElementById('progress-bar').style.width = barWidth + 'px'
}

document.body.scrollHeight網頁正文全文高

document.body.clientHeight網頁可見區域高

二者相減獲得滾動條的長度

document.documentElement.scrollTop網頁滾動條距離頂部的長度

相除獲得進度的百分比

document.body.offsetWidth網頁可見區域寬(包括邊線的寬)

相乘則按比例獲得進度條的寬度

關於獲取這些長度不同瀏覽器規則不同，具體可以參考這篇文章→JS獲取網頁高度和寬度-夢深深處

5.完成