由于種種原因，瀏覽器的默認滾動條“衣裳”實在是 (ˉ▽￣～)~~，為了“美”，本人結合萬維網各大神給的經驗和自己的實踐，做了此篇總結。若有錯誤，請在評論里給出，我會及時更改。
我在電腦上打開了一些瀏覽器，先觀察一下，其中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 | 設置滾動條軌跡組成部分的顏色 |
?由于放不了圖，各位還是自己直觀試試吧，一下是我的總結：
?1、關于scrollbar-dark-shadow-color屬性，我是在win7系統下測試Edge、IE10、9、8、7、5都沒有顯示什么，包括和其他屬性組合，也沒效果；
?2、這幾個元素的從屬關系：? ?scrollbar-face-color || scrollbar-arrow-color || scrollbar-shadow-color > scrollbar-track-color > scrollbar-highlight-color >scrollbar-base-color > scrollbar-3dlight-color；
?3、scrollbar-3dlight-color不論設置什么顏色，滾動條軌跡組成部分的顏色變為white色,滾動框和滾動條箭頭的顏色變淺灰色 ;
?4、scroll-base-color是一個備用顏色 ,在其他屬性不設置任何顏色時，滾動條顏色為此色，滾動框黑色，滾動軌跡為此色的淺色系，上下箭頭變深接近黑色;
?5、在只設置scrollbar-track-color或者只設置scrollbar-face-color時，上下兩個箭頭的顏色會變得比默認顏色深;
?6、在只設置scrollbar-face-color時候，滾動條軌跡組成部分的顏色變為white色;
?7、在只設置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：?
css:?
這些偽元素還可以搭配很多偽類，英文鏈接, 漢文翻譯
: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/
：File類)