一個醜醜的滾動條在某些時候是非常礙眼的，移動端由於螢幕小的緣故，更是顯眼，最好還是讓它能不出現，就不出現。除了用div遮罩外，許多瀏覽器核心也提供了私有屬性控制滾動條的樣式。移動端多為weibkit核心，滾動條的定製方案提供的很完善，蠻強大的哦~

最基本的，overflow屬性先設定好auto或者scroll，而不是hidden，畢竟我們僅僅是隱藏了滾動條，而不是讓它整個都不能滾了。。。

滾動條的涵義

::webkit-scrollbar   //1 滾動條整體部分，其中的屬性有width,height,background,border（就和一個塊級元素一樣）等。
::webkit
 
-scrollbar-button //2 滾動條兩端的按鈕。可以用display:none讓其不顯示，也可以新增背景圖片，顏色改變顯示效果。
::webkit-scrollbar-track   //3  外層軌道。可以用display:none讓其不顯示，也可以新增背景圖片，顏色改變顯示效果。
::webkit-scrollbar-track-piece //4  內層軌道，滾動條中間部分（除去）。
::webkit-scrollbar-thumb  //5  滾動條裡面可以拖動的那部分
::webkit-scrollbar-corner  //6  邊角
::webkit-resizer  //7   定義右下角拖動塊的樣式
 

注意水平滾動條只能設height，width是隨著螢幕變化的。而豎直滾動條只能設width。

隱藏滾動條

使用場景：時間選擇器

設計圖：

CSS：

.listcol{  //上圖中選中的部分，每一欄的classname
    font-size: 1.3rem;
    line-height: 2rem;
    width: 4.5rem;
    color:#999;
    text-align: center;
    overflow-y:scroll;
    z-index: 10;
    &::-webkit-scrollbar{
        background-color:transparent;
 

    }
    &__item{
        height: 2rem;
    }
}

自定義滾動條

詳見chrome的文件，但支援並不是非常好，建議從低到高，慢慢踩坑。。。

我的一點心得是，首先必須定義一個::webkit-scrollbar，而且裡面必須有內容，接下來的::webkit-scrollbar-track等設定才能生效。而且後面的屬性會覆蓋前面的屬性。像corner之類的可能做那麼花哨的也很少，主要用的也就是track, track-piece, thumb這三個。

比如：

.listcol{
    &::-webkit-scrollbar{
        background-color:yellow;
        width: 1rem;
    }
    &::-webkit-scrollbar-track{
        background-color: #f25712; //一種偏橘的紅色（如果是口紅色號的話應該適合白皮）
        //height:5rem;  加了也沒用
    }
    &::-webkit-scrollbar-track-piece{
        background-color: #cdcdcd; //一種灰色
        height: 2rem;
    }
    &::-webkit-scrollbar-thumb{
        @include bg('choose'); //就是那個圓裡有個對勾的圖形，bg是我寫的mixin，就是添加個背景圖片。
    }
}

效果是這樣的：

去掉-track-piece之後，就顯示了track的顏色：

這個還挺智慧的，能顯示出一深一淺的兩種色來區分滑塊和滑道。。。。。。

去掉track之後，就顯示了scrollbar的黃色，而且也是能區分出兩種顏色的。那個黃色不好看，來看看這個墨綠，秋冬羊毛大衣這個顏色應該很好看：

有個小細節不知道有沒有人注意到，這個圖示裡面的對勾是透明的，會呈現背景色~想象一下在:active下的效果，應該很棒。

延伸

chrome是把滾動條作為偽元素來對待，還可以再往上面壘狀態，什麼active之類的。

看到好幾篇文章上來就在body裡寫大寫的SCROLLBAR-FACE，還有什麼base-color，但不寫清楚是什麼瀏覽器，敲黑板啊，噹噹噹，這是 IE 的。。。。移動端還是乖乖用webkit吧！

寫的很詳細，ie, firefox, chrome都寫到了，但demo打不開，評論說火狐不好使，總之不能幹看，一定要自己動手試試，才知道哪裡是坑。。。