摘要：注意此處的定位是以即的外沿框進行定位的。關于單位，這個單位代表的意思即，即瀏覽器可視區(qū)域的高度。，我們現(xiàn)在來看效果將會是下面這張圖片顯示的樣子。設置目的即讓的高度為，即到頂部的距離減去的距離。
簡單的說明一下，使用這個標題并不就是說要使用全英文來寫這篇文章，主要是實在想不到更好的叫法了，也不知道怎么樣能夠更好的翻譯成中文。
可以簡單地理解為：使用 CSS 來實現(xiàn)一個閱讀文章時的簡單的進度條效果。
本文所需要用到的背景知識點包括：background-size, linear-gradient, calc() 函數(shù)， vh 單位。
Indicator 是什么？可以把它看作是一個指標，這種指標其實很常見，在我們閱讀文章的時候，我們會將文章向上滾動，一些網(wǎng)站的做法就是給用戶一個指標，標示用戶已經(jīng)讀了多少內(nèi)容了，這個指標就類似于一個進度條的樣子，鼠標每向上或者向下滾動一點，這“進度條”會增加或者減少一點。用戶閱讀完畢的時候，它的長度也會達到整個網(wǎng)頁的寬度。
一般情況下，如果要實現(xiàn)一個這樣的效果，我們首先想到的肯定是使用 JavaScript。通過使用 JavaScript 來根據(jù)用戶滾動的距離，然后，將這個距離和 Indicator 的總長度以及剩余內(nèi)容的高度綜合進行比較，進行一些換算，然后改變 Indicator 的長度，這樣，就實現(xiàn)了一個 Indicator 了。
本文不會講解如何使用 JavaScript 來實現(xiàn)此效果，如果有需要的，可以參考 Bloomberg Article Scroll Indicator。
那么，本文主要講解的就是如何使用 CSS 來實現(xiàn)此效果。
首先，我們將 HTML 都寫好了(由于涉及到滾動，所以，可以隨意的多加點內(nèi)容，此處只是示范性地寫了一點內(nèi)容，具體的讀者可以自行添加更多內(nèi)容)：
I was interested to see if I could make a scroll indicator like this with just CSS.
You can! But maybe you shouldn"t. This is an interesting consequence of a bunch of hacks held together with duct tape. It uses z-index hacks, gradient hacks and tricks with calc and viewport units.
Having said that, hacks are not always bad. I love hacks and many of us have made quite a good living selling floats and clearfixes.
The techniques used here are well supported, if not conventional. If you can read the CSS, understand how it works, and how to change it, and you think this works better for you than JavaScript, feel free to implement it. Just be aware of the z-index behaviour and possible conflict with other CSS using negative z-index.
Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur.
Tristique Aenean Etiam Cras
Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.
Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna.
然后，我們簡單的調(diào)整一下樣式：
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: "Times New Roman", Courier, monospace;
font-size: 1.25rem;
}
由于我們滾動的時候，需要讓 header 保持不動，所以，需要給它設置 position: fixed;：
header {
position: fixed;
top: 0;
width: 100%;
height: 125px;
padding: 0 10%;
background: #ffffff;
}
然后，為了避免 main 元素包含的內(nèi)容被 header 覆蓋，我們需要讓 main 往下挪一些，同時給它設置一個 padding：
main {
margin-top: 125px;
padding: 10px 10%;
}
OK，大概的調(diào)整就這些，我們現(xiàn)在來構思如何實現(xiàn)這個 Amazing 的效果。
按照使用 JavaScript 來實現(xiàn)這個效果的思想，那么，我們就需要先去計算一個百分比——也就是滾動的文章長度與總的剩余文章長度的比。
如下圖所示：
假設我們文章的總長度為 a，以紅色的線為界限，超出紅線上的部分即為滾動的距離。那么，我們此刻滾動的距離為 x，z 代表的是滾動的進度百分比，紅線的總長度 y 即為我們的 Indicator 的總長度，也就是所謂的 100%。那么，我們需要的肯定是以下的關系：
x / a === z / y;
那么，計算出來的滾動的進度百分比 z 應該就是：
z = (x * y) / a;
好了，這是 JavaScript 的大概思路，我們已經(jīng)了解了，我們先把這個結果放這兒，來看看如何使用 CSS 來實現(xiàn)。
在這里，我們需要用到兩個 CSS 屬性和一個 CSS 方法和一個 CSS 單位——linear-gradient, background-position 和 calc() 和 vh。
簡單的介紹一下這兩個屬性：
1.background-position 接受 1 到 4 個參數(shù)，默認值為 0% 0%。可以設置的值有 top right bottom left center，前四個值后面還可以跟具體的數(shù)值或者百分比。如果不加方向說明，直接設置數(shù)值或者百分比，位置則會以 left top 進行定位。注意：此處的 top right bottom left 定位是以 padding-box(即 padding 的外沿框) 進行定位的。
（若要了解詳細內(nèi)容，可查看 background-position | MDN。）
2.關于 linear-gradient，即用來創(chuàng)建線性漸變。這個函數(shù)可接受多個參數(shù)值，其中，第一個表示漸變的方向，如果不寫的話，默認為 to bottom，其余分別是 to top | left | right，后面的參數(shù)表示漸變的顏色，可以有多個顏色，每一個顏色后面還可以指定顏色的漸變位置。
（若要了解詳細內(nèi)容，可查看 linear-gradient | MDN。）
注意：由于 linear-gradient 生成的是一個 CSS image 對象，所以，這個函數(shù)只能應用在需要的數(shù)據(jù)類型是 image 的屬性(如 background-image, background)上。也就是說，如果在 color 或者 background-color 屬性上應用這個函數(shù)的話，將會不起作用。
3.關于 calc() 函數(shù)，可以用來動態(tài)計算 CSS 的屬性值。比如 calc(100px - 10px) 最終結果就為 90px;
若要了解詳細內(nèi)容，可查看 calc | MDN。
注意：為了讓這個函數(shù)向上兼容，以后可能會在 calc 的內(nèi)部允許使用關鍵字(或者說變量)，而這些關鍵字(或者變量)就包含連字符(即減號)，所以，為了避免解析沖突，要在運算符的前后加上空格。其中，+ 和 - 前后必須加上空格，* 和 / 前后不要求，但為了一致性，最好也都加上空格。
4.關于 vh 單位，這個單位代表的意思即 ViewHeight，即瀏覽器可視區(qū)域的高度。與百分比類似，100vh = height: 100%。
(若要了解詳細內(nèi)容，可查看 length | MDN。)
那么，我們使用 CSS 實現(xiàn)的話，思路和 JavaScript 稍微有一點區(qū)別。但原理是一樣的，我們?nèi)匀恍枰嬎阋粋€比例。
還是來看一張圖：
我們將我們的我們讓 Indicator 的寬度和 body 等寬(好吧，其實就是 100%，此處這樣話會好理解一點)，然后，注意到黃色的三角形了嗎，當我們向上滾動的時候，黃色的三角形也會跟著向上滾動，同時，它會和長度為 y 的 Indicator 發(fā)生交叉，Indicator 會從三角形截出一段距離 z。這時候，黃色三角形向上移動的距離是 x。那么，要達到 Indicator 的效果，我么肯定要滿足下面的條件：
x / a === z / y;
所以，這樣計算出來，我們的 z 就是：
z = (x * y) / a;
注意到?jīng)]，其實和我們上面的使用 JavaScript 時的計算結果是一樣的。所以，原理相同，我們只需要變通一下就好了。
那么，怎么用 CSS 寫出來呢？
注意到黃色三角形了嗎，它上面還有一個白色三角形，它們兩個是對稱的，由兩種不同的顏色組成，正好可以將其作為我們的 Indicator 的高亮色和默認色。
我們把這兩種顏色作為 body 的背景顏色，文章就在這個背景的上面，那么，我們滾動文章的時候，背景也會跟著動，就會有以上圖中的效果了。
body {
background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
background-position: 0 125px;
background-size: 100% calc(100% - 100vh + 5px);
background-repeat: no-repeat;
}
注意到第一個屬性的設置了嗎，我們將兩個顏色的位置都設置成了 50%，那么，這就相當于簡便的過渡區(qū)域趨于無限小，看上去就相當于兩種顏色累積在一起。
第二個屬性，我們將背景的位置進行了更改，將其往下移動了 125px，這個距離正好是我們的 header 的高度。這樣，在我們沒有滾動的時候，Indicator 的進度將會是 0；。
第三個屬性，看著這么長一個計算的等式，其實計算的是我們的剩余文章的長度。100% 即文章的總長度，100vh 即我們所看到的文章的長度，至于那個 5px 是什么，那是我們預留出來顯示 Indicator 的高度。
OK，我們現(xiàn)在來看效果將會是下面這張圖片顯示的樣子。
我們看到，當我們向上滾動的時候，header 和 main 的交界處的藍色區(qū)域在變化，對，這就是我們將要實現(xiàn)的 Indicator 的原型。
那么，既然是一個 Indicator，那他就應該有一個 Indicator 的樣子。我們需要把下面的那些全部遮住，只留出 Indicator 的那一條 progress bar。
所以，我們繼續(xù)完善代碼：
body:before {
content:"";
position: fixed;
top: 127px;
bottom: 0;
width: 100%;
z-index: -1;
background: white;
}
我們通過使用一個偽元素來把 body 中多余的背景給隱藏掉。
設置 top: 127px; 目的即讓 Indicator 的高度為 2px，即到頂部的距離減去 header 的距離。
至此，我們使用 CSS 制作的 Indicator 就上大功告成了。
下面是我們實現(xiàn)的所有代碼和效果：
CSS only scroll indicator
本文參考自 https://codepen.io/MadeByMike...，我在此基礎上對其進行了一些優(yōu)化。如果有問題，歡迎在評論區(qū)留言，F(xiàn)eel Free To Ask。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/111468.html
