IT的隱形人世界

之前看網站時，發現一個功能，就是閱讀進度條

這功能可以讓User知道自己的頁面還有多長多多，就是一個炫麗的效果，這邊筆記一下

這邊使用到的是Vue，UI使用Vuetify

 

首先我們先使用Vuetify中的v-progress-linear，他是一個進度條

大概簡單套一下div與簡單的css，如喜歡可以把它變成一個元件，後續可以多加利用

<div >
        <v-progress-linear style="width: 100%;
               position: -webkit-sticky;
               position: fixed;
               top: 0;
               z-index: 1050" v-model="readPercentage">
        </v-progress-linear>
</div>

再來是js的部分，我在mounted的時候，直接加上一個Listener來監聽scrollbar的位置

mounted() {
            var self = this;
            document.addEventListener("scroll", function(){
               if(document.scrollingElement.scrollTop == 0)
                  self.readPercentage = 0;
               else
                  self.readPercentage = (document.scrollingElement.scrollTop + window.innerHeight) / document.body.clientHeight * 100;
               
            });

}

這樣就完成了

講解一下各個參數代表的位置

1. document.scrollingElement.scrollTop

bar條頂端的位置

 

2. window.innerHeight

頁面的高度

 

3. document.body.clientHeight

整個頁面的高度(body)

 

所以: 

document.scrollingElement.scrollTop + window.innerHeight = bar條底端高度

bar條底端高度/頁面高度*100 = 閱讀進度

利用這三個數值就可以簡易的算出閱讀進度囉!

整體示意圖: