進度條的2種實現方式1.js 2.純css

Scroll Indicator稱之爲滾動指示器，是Web中常見的一種效果。用戶滾動垂直滾動內容時，頁面頂部有一個相似進度條的效果，當內容滾動到頁面最低端，進度條效果填滿整個進度條。感受描述得有點繞，仍是錄製一個動效圖，用圖來講明這種效果，畢竟一圖賽過千言萬語：

之前實現這種效果都須要藉助於JavaScript，或者說是採用jQuery的插件。網上有關於這方面的介紹的文章也不少，好比：

• @PANKAJ PARASHAR的《Reading Position Indicator》
• @Jonathan Cutrell的《How to Build a Page Scroll Progress Indicator With jQuery and SVG》

但今天我們要說的是使用純CSS製做Scroll Indicator效果。說到這裏，你們或許會問，這樣的效果用CSS實現，吹了吧。其實使用純CSS實現一點也沒有問題。若是你感興趣，歡迎接着往下閱讀。

Scroll Indicator幾個關鍵點

先來看JavaScript的作法：

看代碼變化就清楚，經過JavaScript改變容器scroll-line的width值。也就是在滾動內容的時候，width值從0%變化到100%。其中最重要的是要知道滾動條位置的計算。在整個計算中，要知道兩個重要的參數:

• document height:文檔的高度$(document).height()
• window height: 視窗高度$(window).height()

以下圖所示：

文檔高度和視窗高度有一個差值max，其實這個差值就是須要滾動的值，簡單的理解就是scroll-line寬度爲100%時候的寬度值。這樣一來，我們就知道了全寬的width值，另外還須要知道的另外一個關鍵值是滾動條的位置的值$(window).scrollTop()。有了這兩個值，經過($(window).scrollTop() / ($(document).height() - $(window).height())) * 100%就知道進度條的當前值。

最終效果能夠看看@Derek Palladino在CodePen寫的一個示例：

 

另外再看一個@Dan Eden寫的一個示例：

 

有關於JavaScript實現方案相關介紹，能夠仔細閱讀上面的兩篇文章。

CSS實現方案

純CSS實現Scroll Indicator效果最難的是不知道滾動條距頂部的距離，並且也不知道文檔高度和視窗高度的差值。要按前面的方案實現，是不太可能。不過咱們能夠經過別的方案來模擬。

一樣的須要兩個容器：

<div class="scroll-process">
    <div class="scroll-line"></div>
</div>

其中scroll-process是全屏寬，也就是至關於($(document).height() - $(window).height()),裏面scroll-line的寬度就是($(window).scrollTop() / ($(document).height() - $(window).height())) * 100%。以下圖所示：

上圖藍色區域是scroll-line，灰色區域是scroll-process。

原理是同樣，只是實現咱們不能借助JavaScript實現，而是須要使用CSS來模擬JavaScript效果。

仔細思考一下，在Web中，自帶滾動功能的是body元素，或者說某個限制大小尺寸，設置了overflow屬性爲scroll值也會出現滾動條效果。另外，要隨着滾動條滾動，scroll-line要出現相似進度條的效果。

上圖簡單的模擬出來進度條的效果了，而實現上現的效果，在CSS中是很容易的，咱們只須要在容器中使用CSS的line-gradient屬性。好比說在body中使用：

background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);

這樣的效果還不能知足咱們的需求：

 

上面示例演示的是100vh的高度，也就是視窗高度，按上面的方式，先看下面的動圖：

這個效果纔是咱們想要的。固然並非完美。不過先忽略這一點。若是要實現上圖的效果，還要作一下處理。在CSS中有一個background-size屬性，這個屬性能夠幫助咱們控制背景圖大小，也就是漸變圖的大小。而對於background-size須要的是其y軸的值。那問題又來了，y軸的值怎麼肯定。

在CSS中要獲得視窗高度，也就是前面所說的$(window).height()。它就是100vh。而咱們進度的值是($(window).scrollTop() / ($(document).height() - $(window).height())) * 100%。要對於background-size的y與其同樣，那麼能夠經過100%-100vh。要獲得100% - 100vh的值還須要使用CSS中的calc()：

body{
  background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
  background-size: 100% calc(100% - 100vh);
}

離須要的效果愈來愈近了：

 

最近須要一個蒙層，讓進度條看上去更美一些。

body:before {
  content: '';
  position: fixed;
  top: 5px;
  bottom: 0;
  width: 100%;
  z-index: -1;
  background: white;
}