由於種種原因，瀏覽器的默認滾動條“衣裳”實在是 (ˉ▽￣～)~~，為了“美”，本人結合萬維網各大神給的經驗和自己的實踐，做了此篇總結。若有錯誤，請在評論里給出，我會及時更改。
我在電腦上打開了一些瀏覽器，先觀察一下，其中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