瀏覽器滾動條 --- 自定義「衣裳」

因爲種種緣由，瀏覽器的默認滾動條「衣裳」實在是 (ˉ▽￣～)~~，爲了「美」，本人結合萬維網各大神給的經驗和本身的實踐，作了此篇總結。如有錯誤，請在評論裏給出，我會及時更改。

我在電腦上打開了一些瀏覽器，先觀察一下，其中IE瀏覽器版本（10-5）在我電腦上顯示是一致的，火狐版本爲 59.0.2。以下圖（1）可見，除了火狐瀏覽器和Opera瀏覽器的樣式與其餘瀏覽器樣式差異較大，其他樣式差異不大，主要是顏色的不一樣。

不知道爲何我放不上圖片，╭(╯^╰)╮ ε=唉 ！

（一）專屬IE的「衣裳」

網上找到一個不錯的分享，我本身在總結下，內容原網址

滾動條樣式	支持狀況	支持瀏覽器版本	能否繼承	描述
scrollbar-3dlight-color	IE特有屬性	IE5.5+	y	設置滾動框的和滾動條箭頭左上邊緣的顏色
scrollbar-highlight-color	IE特有屬性	IE5.5+	y	設置滾動框的和滾動條箭頭左上邊緣的顏色
scrollbar-face-color	IE特有屬性	IE5.5+	y	設置滾動框和滾動條箭頭的顏色
scrollbar-arrow-color	IE特有屬性	IE5.5+	y	設置滾動條箭頭的顏色
scrollbar-shadow-color	IE特有屬性	IE5.5+	y	設置滾動框的和滾動條箭頭右下邊緣的顏色
scrollbar-dark-shadow-color	IE特有屬性	IE5.5+	y	設置滾動條槽的顏色
scrollbar-base-color	IE特有屬性	IE5.5+	y	設置滾動條主要構成部分的顏色
scrollbar-track-color	IE特有屬性	IE5.5+	y	設置滾動條軌跡組成部分的顏色

 因爲放不了圖，各位仍是本身直觀試試吧，一下是個人總結：

 一、關於scrollbar-dark-shadow-color屬性，我是在win7系統下測試Edge、IE十、九、八、七、5都沒有顯示什麼，包括和其餘屬性組合，也沒效果；

 二、這幾個元素的從屬關係：   scrollbar-face-color || scrollbar-arrow-color || scrollbar-shadow-color > scrollbar-track-color > scrollbar-highlight-color >scrollbar-base-color > scrollbar-3dlight-color；

 三、scrollbar-3dlight-color不論設置什麼顏色，滾動條軌跡組成部分的顏色變爲white色,滾動框和滾動條箭頭的顏色變淺灰色 ;

 四、scroll-base-color是一個備用顏色 ,在其餘屬性不設置任何顏色時，滾動條顏色爲此色，滾動框黑色，滾動軌跡爲此色的淺色系，上下箭頭變深接近黑色;

 五、在只設置scrollbar-track-color或者只設置scrollbar-face-color時，上下兩個箭頭的顏色會變得比默認顏色深;

 六、在只設置scrollbar-face-color時候，滾動條軌跡組成部分的顏色變爲white色;

 七、在只設置scrollbar-arrow-color時候，滾動條軌跡組成部分的顏色變爲white色,滾動框和滾動條箭頭的顏色變淺灰色;

 8、滾動條寬度沒法設置，不能設置出弧度等形狀 。 

（二）webkit內核的「衣裳」

擁有webkit內核的瀏覽器差很少都支持下面的css屬性，下邊的僞元素最好放在css文件頂部，方便找。
::- webkit - scrollbar { } /* 滾動條總體部分，其中的屬性有width,height,background,border（就和一個塊級元素同樣）等 */
::- webkit - scrollbar - button { } /* 滾動條兩端的按鈕。能夠用display:none讓其不顯示，也能夠添加背景圖片，顏色改變顯示效果 */
::- webkit - scrollbar - track { } /* 外層軌道。能夠用display:none讓其不顯示，也能夠添加背景圖片，顏色改變顯示效果 */
::- webkit - scrollbar - track - piece { } /* 內層軌道，滾動條中間部分（除去）*/
::- webkit - scrollbar - thumb { } /* 滾動條裏面能夠拖動的那部分 */
::- webkit - scrollbar - corner { } /* 邊角 */
::- webkit - resizer { } /* 定義右下角拖動塊的樣 */ 

eg:

html： 

<div class="main">

<div class="box">

<div class="box-ctn">Hello 。。。</div>

</div>

</div>

css: 

::-webkit-scrollbar { width: 10px; height: 10px; background: #f2f2f2; border: yellowgreen 1px solid; }

::-webkit-scrollbar-button { background-color:#267326; }

::-webkit-scrollbar-track { background:#9fdf9f; }

::-webkit-scrollbar-track-piece { background:url(http://pic.58pic.com/58pic/16/41/00/49F58PICmZg_1024.jpg); }

::-webkit-scrollbar-thumb { background:#339933; border-radius: 5px; }

::-webkit-scrollbar-corner { background:#ff0000; }

::-webkit-resizer { background:#ff0000; }

::-webkit-scrollbar-button:horizontal { background-color:#00a3cc; }

::-webkit-scrollbar-track:horizontal { background:#b3f0ff; }

::-webkit-scrollbar-thumb:vertical { background:#1ad1ff; border-radius: 5px; }

::-webkit-scrollbar-thumb:hover { background: #267326; }

::-webkit-scrollbar-thumb:active { background: #267326; }

::-webkit-scrollbar-thumb:vertical:hover { background: #00a3cc; }

::-webkit-scrollbar-thumb:vertical:active { background: #00a3cc; }

::-webkit-scrollbar-button:decrement { border: 1px solid #00a3cc; }

::-webkit-scrollbar-button:increment { border: 1px solid #267326; }

/* ::-webkit-scrollbar-track:corner-present { display: none } */

/* ::-webkit-scrollbar-button:start { background-color: blue; }

    ::-webkit-scrollbar-button:end { background-color: green; } */ 

.main { 

padding: 20px;

border: blue 1px dashed;

}

.box {

width: 500px;

height: 200px;

overflow: scroll;

} 

.box-ctn {

width: 3000px;

height: 1000px;

} 

這些僞元素還能夠搭配不少僞類，英文連接, 漢文翻譯

:horizontal   主要應用於選擇水平方向滾動條，能夠單獨設置水平方向的樣式

:vertical     主要是應用於選擇豎直方向滾動條，能夠單獨設置垂直方向的樣式

:decrement   應用於按鈕和內層軌道(track piece)。它用來指示按鈕或者內層軌道是否會減少視窗的位置(好比，垂直滾動條的上面，水平滾動條的左邊。)

:increment   用來指示按鈕或內層軌道是否會增大視窗的位置(好比，垂直滾動條的下面和水平滾動條的右邊。)

: start     應用於按鈕和滑塊。它用來定義對象是否放到滑塊的前面。

:end   標識對象是否放到滑塊的後面。

:double-button   該僞類能夠用於按鈕和內層軌道。用於判斷一個按鈕是否是放在滾動條同一端的一對按鈕中的一個。對於內層軌道來講，它表示內層軌道是否緊靠一對按鈕。

:single-button    相似於double-button僞類。對按鈕來講，它用於判斷一個按鈕是否本身獨立的在滾動條的一段。對內層軌道來講，它表示內層軌道是否緊靠一個single-button。

:no-button   用於內層軌道，表示內層軌道是否要滾動到滾動條的終端，好比，滾動條兩端沒有按鈕的時候。

:corner-present    用於全部滾動條軌道，指示滾動條圓角是否顯示。

:window-inactive    用於全部的滾動條軌道，指示應用滾動條的某個頁面容器(元素)是否當前被激活。(在webkit最近的版本中，該僞類也能夠用於::selection僞元素。webkit團隊有計劃擴展它並推進成爲一個標準的僞類)

:hover   鼠標懸浮時的效果

:active   被激活時的樣式

:enabled    元素的可用狀態

:disabled   元素的禁用狀態

根據僞類能夠增長滾動條的樣式以及一些動畫，我最經常使用的是 :hover、 :active 、:window-inactive，根據需求你們能夠多多嘗試。

（三）Firefox的「衣裳」

這件可真是換不下來了

網上給了一些參考，但我試了試，沒弄明白，下面是鏈接，有興趣的看完會的，若不麻煩留言給個例子吧 

https://bbs.kafan.cn/thread-1529981-1-1.html 

參考文件： 

 小天地，大世界[https://www.lyblog.net]   https://www.lyblog.net/detail/314.html

 https://webkit.org/blog/363/styling-scrollbars/