手把手教你：CSS+JS 打造一個有個性的滾動條
theme: healer-readable
本文正在參加「金石計劃 . 瓜分6萬現金大獎」
前言
每次瀏覽網頁的時候，有個東西必不可少，那就是滾動條。這時候有的同學可能會說了：這句話不對，有的網頁看不到滾動條。其實吧，那並不是看不到滾動條，而是滾動條被隱藏起來了。我們反過來想想，如果沒有滾動條，如何滾動更多內容呢？所以，網頁的滾動條是很重要的。
不難發現，大部分網頁的滾動條都是一個樣式，並沒有很多其他的特別元素。那麼如何能讓滾動條變的豐富多彩呢？接下來我來手把手教你如何用簡單的方式來創造一個有個性的滾動條。
進入主題
什麼時候網頁才會出現滾動條？只有當內容高度大於瀏覽器視窗高度時才會有滾動條的出現，因此第一步我們需要有足夠的內容。比如這樣，用div塊級元素來實現佔一行，多重複一些div元素即可。
```
......
```
然後我們加入滾動條的元素，可以定義為progressbar以及scrollPath。 ```
``` 完成這些前期準備後，就可以開始進入CSS階段了。
CSS階段
首先使用-webkit-scrollbar將原生的滾動條的寬度設定為0，因為我們需要自定義其他的滾動條樣式，如果不設定為0，就會出現兩種滾動條，從而產生衝突，如下圖所示。
::-webkit-scrollbar{
width: 0;
}
然後對自定義的滾動條元素進行初步樣式處理，程式碼如下所示。
```
scrollPath{
position: fixed;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: rgba(255,255,255,0.05);
}
progressbar{
position: fixed;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: linear-gradient(to top,#008aff,#00ffe7);
animation: animate 5s linear infinite;
}
這裡主要是對滾動條的寬度和顏色進行了處理，前面通過`-webkit-scrollbar`將原生的滾動條寬度設定為0，這裡將自定義的滾動條寬度設定為10px。除此之外，在**progressbar**裡設定了動畫屬性，相關程式碼如下所示
@keyframes animate {
0%,100%{
filter: hue-rotate(0deg);
}
50%{
filter: hue-rotate(360deg);
}
}
``
簡單點理解此動畫的含義就是調色，使用CSS的filter`濾鏡中的 hue-rotate() 色調旋轉濾鏡。如下圖所示。
這就是加入動畫後的效果。完成以上CSS階段的工作後，其實已經達到我們需要的不一樣的滾動條效果了。但是如果想要讓它變得更好的話，就可以交給剩下的JS部分了，因此，我們最終進入JS階段。
JS階段
```
``
如果說**CSS**是修飾外在的工具，那麼**JS**就是控制內在的工具了。像scrollHeight以及innerHeight`這些都是瀏覽器自帶的屬性，這些屬性可能不常用，但是都需要我們去額外瞭解。後期我會總結一下瀏覽器的相關屬性，以供學習參考。
說回以上這段程式碼，這段程式碼其實可以作為模板程式碼，在很多地方都可以直接套用。它的含義就是當滑動過程中滾動條會隨著內容的變化而變化。用瀏覽器的視窗高度減去滾動內容的高度就是需要滑動的滾動條高度。可能這麼說會有點抽象，咱們直接看效果吧。
效果展示
這樣看大家應該就能明白了吧。CSS只是實現了滾動條的基本樣式，但是基本控制還要靠JS來實現。當滑動了多少內容，就展示多少高度的滾動條，這樣可以提高觀賞性以及使用者體驗感。
最終程式碼
html部分 ```
內容省略
**CSS部分**
::-webkit-scrollbar{
width: 0;
}
scrollPath{
position: fixed;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: rgba(255,255,255,0.05);
}
progressbar{
position: fixed;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: linear-gradient(to top,#008aff,#00ffe7);
animation: animate 5s linear infinite;
}
@keyframes animate {
0%,100%{
filter: hue-rotate(0deg);
}
50%{
filter: hue-rotate(360deg);
}
}
**JS部分**
```
總結
滾動條實現起來並不難，但是卻非常常見，可能只需要給它加上一點點額外的元素就可以讓它變得豐富多彩，而這些屬性可能在平時的學習中並不會接觸到，所以我們可以在瞭解瀏覽器滾動條的同時，再去額外瞭解一些不常見的屬性，來增加我們的CSS以及JS知識儲備。