摘要：注意此處的定位是以即的外沿框進(jìn)行定位的。關(guān)于單位，這個(gè)單位代表的意思即，即瀏覽器可視區(qū)域的高度。，我們現(xiàn)在來看效果將會(huì)是下面這張圖片顯示的樣子。設(shè)置目的即讓的高度為，即到頂部的距離減去的距離。
簡單的說明一下，使用這個(gè)標(biāo)題并不就是說要使用全英文來寫這篇文章，主要是實(shí)在想不到更好的叫法了，也不知道怎么樣能夠更好的翻譯成中文。
可以簡單地理解為：使用 CSS 來實(shí)現(xiàn)一個(gè)閱讀文章時(shí)的簡單的進(jìn)度條效果。
本文所需要用到的背景知識(shí)點(diǎn)包括：background-size, linear-gradient, calc() 函數(shù)， vh 單位。
Indicator 是什么？可以把它看作是一個(gè)指標(biāo)，這種指標(biāo)其實(shí)很常見，在我們閱讀文章的時(shí)候，我們會(huì)將文章向上滾動(dòng)，一些網(wǎng)站的做法就是給用戶一個(gè)指標(biāo)，標(biāo)示用戶已經(jīng)讀了多少內(nèi)容了，這個(gè)指標(biāo)就類似于一個(gè)進(jìn)度條的樣子，鼠標(biāo)每向上或者向下滾動(dòng)一點(diǎn)，這“進(jìn)度條”會(huì)增加或者減少一點(diǎn)。用戶閱讀完畢的時(shí)候，它的長度也會(huì)達(dá)到整個(gè)網(wǎng)頁的寬度。
一般情況下，如果要實(shí)現(xiàn)一個(gè)這樣的效果，我們首先想到的肯定是使用 JavaScript。通過使用 JavaScript 來根據(jù)用戶滾動(dòng)的距離，然后，將這個(gè)距離和 Indicator 的總長度以及剩余內(nèi)容的高度綜合進(jìn)行比較，進(jìn)行一些換算，然后改變 Indicator 的長度，這樣，就實(shí)現(xiàn)了一個(gè) Indicator 了。
本文不會(huì)講解如何使用 JavaScript 來實(shí)現(xiàn)此效果，如果有需要的，可以參考 Bloomberg Article Scroll Indicator。
那么，本文主要講解的就是如何使用 CSS 來實(shí)現(xiàn)此效果。
首先，我們將 HTML 都寫好了(由于涉及到滾動(dòng)，所以，可以隨意的多加點(diǎn)內(nèi)容，此處只是示范性地寫了一點(diǎn)內(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;
}
由于我們滾動(dòng)的時(shí)候，需要讓 header 保持不動(dòng)，所以，需要給它設(shè)置 position: fixed;：
header {
position: fixed;
top: 0;
width: 100%;
height: 125px;
padding: 0 10%;
background: #ffffff;
}
然后，為了避免 main 元素包含的內(nèi)容被 header 覆蓋，我們需要讓 main 往下挪一些，同時(shí)給它設(shè)置一個(gè) padding：
main {
margin-top: 125px;
padding: 10px 10%;
}
OK，大概的調(diào)整就這些，我們現(xiàn)在來構(gòu)思如何實(shí)現(xiàn)這個(gè) Amazing 的效果。
按照使用 JavaScript 來實(shí)現(xiàn)這個(gè)效果的思想，那么，我們就需要先去計(jì)算一個(gè)百分比——也就是滾動(dòng)的文章長度與總的剩余文章長度的比。
如下圖所示：
假設(shè)我們文章的總長度為 a，以紅色的線為界限，超出紅線上的部分即為滾動(dòng)的距離。那么，我們此刻滾動(dòng)的距離為 x，z 代表的是滾動(dòng)的進(jìn)度百分比，紅線的總長度 y 即為我們的 Indicator 的總長度，也就是所謂的 100%。那么，我們需要的肯定是以下的關(guān)系：
x / a === z / y;
那么，計(jì)算出來的滾動(dòng)的進(jìn)度百分比 z 應(yīng)該就是：
z = (x * y) / a;
好了，這是 JavaScript 的大概思路，我們已經(jīng)了解了，我們先把這個(gè)結(jié)果放這兒，來看看如何使用 CSS 來實(shí)現(xiàn)。
在這里，我們需要用到兩個(gè) CSS 屬性和一個(gè) CSS 方法和一個(gè) CSS 單位——linear-gradient, background-position 和 calc() 和 vh。
簡單的介紹一下這兩個(gè)屬性：
1.background-position 接受 1 到 4 個(gè)參數(shù)，默認(rèn)值為 0% 0%。可以設(shè)置的值有 top right bottom left center，前四個(gè)值后面還可以跟具體的數(shù)值或者百分比。如果不加方向說明，直接設(shè)置數(shù)值或者百分比，位置則會(huì)以 left top 進(jìn)行定位。注意：此處的 top right bottom left 定位是以 padding-box(即 padding 的外沿框) 進(jìn)行定位的。
（若要了解詳細(xì)內(nèi)容，可查看 background-position | MDN。）
2.關(guān)于 linear-gradient，即用來創(chuàng)建線性漸變。這個(gè)函數(shù)可接受多個(gè)參數(shù)值，其中，第一個(gè)表示漸變的方向，如果不寫的話，默認(rèn)為 to bottom，其余分別是 to top | left | right，后面的參數(shù)表示漸變的顏色，可以有多個(gè)顏色，每一個(gè)顏色后面還可以指定顏色的漸變位置。
（若要了解詳細(xì)內(nèi)容，可查看 linear-gradient | MDN。）
注意：由于 linear-gradient 生成的是一個(gè) CSS image 對(duì)象，所以，這個(gè)函數(shù)只能應(yīng)用在需要的數(shù)據(jù)類型是 image 的屬性(如 background-image, background)上。也就是說，如果在 color 或者 background-color 屬性上應(yīng)用這個(gè)函數(shù)的話，將會(huì)不起作用。
3.關(guān)于 calc() 函數(shù)，可以用來動(dòng)態(tài)計(jì)算 CSS 的屬性值。比如 calc(100px - 10px) 最終結(jié)果就為 90px;
若要了解詳細(xì)內(nèi)容，可查看 calc | MDN。
注意：為了讓這個(gè)函數(shù)向上兼容，以后可能會(huì)在 calc 的內(nèi)部允許使用關(guān)鍵字(或者說變量)，而這些關(guān)鍵字(或者變量)就包含連字符(即減號(hào))，所以，為了避免解析沖突，要在運(yùn)算符的前后加上空格。其中，+ 和 - 前后必須加上空格，* 和 / 前后不要求，但為了一致性，最好也都加上空格。
4.關(guān)于 vh 單位，這個(gè)單位代表的意思即 ViewHeight，即瀏覽器可視區(qū)域的高度。與百分比類似，100vh = height: 100%。
(若要了解詳細(xì)內(nèi)容，可查看 length | MDN。)
那么，我們使用 CSS 實(shí)現(xiàn)的話，思路和 JavaScript 稍微有一點(diǎn)區(qū)別。但原理是一樣的，我們?nèi)匀恍枰?jì)算一個(gè)比例。
還是來看一張圖：
我們將我們的我們讓 Indicator 的寬度和 body 等寬(好吧，其實(shí)就是 100%，此處這樣話會(huì)好理解一點(diǎn))，然后，注意到黃色的三角形了嗎，當(dāng)我們向上滾動(dòng)的時(shí)候，黃色的三角形也會(huì)跟著向上滾動(dòng)，同時(shí)，它會(huì)和長度為 y 的 Indicator 發(fā)生交叉，Indicator 會(huì)從三角形截出一段距離 z。這時(shí)候，黃色三角形向上移動(dòng)的距離是 x。那么，要達(dá)到 Indicator 的效果，我么肯定要滿足下面的條件：
x / a === z / y;
所以，這樣計(jì)算出來，我們的 z 就是：
z = (x * y) / a;
注意到?jīng)]，其實(shí)和我們上面的使用 JavaScript 時(shí)的計(jì)算結(jié)果是一樣的。所以，原理相同，我們只需要變通一下就好了。
那么，怎么用 CSS 寫出來呢？
注意到黃色三角形了嗎，它上面還有一個(gè)白色三角形，它們兩個(gè)是對(duì)稱的，由兩種不同的顏色組成，正好可以將其作為我們的 Indicator 的高亮色和默認(rèn)色。
我們把這兩種顏色作為 body 的背景顏色，文章就在這個(gè)背景的上面，那么，我們滾動(dòng)文章的時(shí)候，背景也會(huì)跟著動(dòng)，就會(huì)有以上圖中的效果了。
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;
}
注意到第一個(gè)屬性的設(shè)置了嗎，我們將兩個(gè)顏色的位置都設(shè)置成了 50%，那么，這就相當(dāng)于簡便的過渡區(qū)域趨于無限小，看上去就相當(dāng)于兩種顏色累積在一起。
第二個(gè)屬性，我們將背景的位置進(jìn)行了更改，將其往下移動(dòng)了 125px，這個(gè)距離正好是我們的 header 的高度。這樣，在我們沒有滾動(dòng)的時(shí)候，Indicator 的進(jìn)度將會(huì)是 0；。
第三個(gè)屬性，看著這么長一個(gè)計(jì)算的等式，其實(shí)計(jì)算的是我們的剩余文章的長度。100% 即文章的總長度，100vh 即我們所看到的文章的長度，至于那個(gè) 5px 是什么，那是我們預(yù)留出來顯示 Indicator 的高度。
OK，我們現(xiàn)在來看效果將會(huì)是下面這張圖片顯示的樣子。
我們看到，當(dāng)我們向上滾動(dòng)的時(shí)候，header 和 main 的交界處的藍(lán)色區(qū)域在變化，對(duì)，這就是我們將要實(shí)現(xiàn)的 Indicator 的原型。
那么，既然是一個(gè) Indicator，那他就應(yīng)該有一個(gè) Indicator 的樣子。我們需要把下面的那些全部遮住，只留出 Indicator 的那一條 progress bar。
所以，我們繼續(xù)完善代碼：
body:before {
content:"";
position: fixed;
top: 127px;
bottom: 0;
width: 100%;
z-index: -1;
background: white;
}
我們通過使用一個(gè)偽元素來把 body 中多余的背景給隱藏掉。
設(shè)置 top: 127px; 目的即讓 Indicator 的高度為 2px，即到頂部的距離減去 header 的距離。
至此，我們使用 CSS 制作的 Indicator 就上大功告成了。
下面是我們實(shí)現(xiàn)的所有代碼和效果：
CSS only scroll indicator
本文參考自 https://codepen.io/MadeByMike...，我在此基礎(chǔ)上對(duì)其進(jìn)行了一些優(yōu)化。如果有問題，歡迎在評(píng)論區(qū)留言，F(xiàn)eel Free To Ask。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/111468.html
