我在電腦上開啟了一些瀏覽器，先觀察一下，其中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：
hello 。。。
css:
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer
::-webkit-scrollbar-button:horizontal
::-webkit-scrollbar-track:horizontal
::-webkit-scrollbar-thumb:vertical
::-webkit-scrollbar-thumb:hover
::-webkit-scrollbar-thumb:active
::-webkit-scrollbar-thumb:vertical:hover
::-webkit-scrollbar-thumb:vertical:active
::-webkit-scrollbar-button:decrement
::-webkit-scrollbar-button:increment
/* ::-webkit-scrollbar-track:corner-present */
/* ::-webkit-scrollbar-button:start
::-webkit-scrollbar-button:end */
.main
.box
.box-ctn
這些偽元素還可以搭配很多偽類，
英文鏈結
, 漢文翻譯 :
根據偽類可以增加滾動條的樣式以及一些動畫，我最常用的是 :hover、 :active 、:window-inactive，根據需求大家可以多多嘗試。
（三）firefox的「衣裳」
這件可真是換不下來了
自定義瀏覽器滾動條樣式
webkit scrollbar 滾動條垂直方向的寬度與水平方向的高度 webkit scrollbar button 滾動條按鈕 webkit scrollbar track 滾動條軌道 webkit scrollbar track piece 滾動條垂直方向軌道件 webkit scrollba...
隱藏瀏覽器預設滾動條和自定義滾動條樣式
chrome瀏覽器和移動端可以使用 webkit scrollbar隱藏瀏覽器自帶的滾動條 webkit scrollbar而火狐和ie可以通過給溢位的盒子巢狀乙個父盒子，設定溢位部分auto顯示，然後使其寬度增加17px 瀏覽器預設佔據內容的寬度為17px 然後給包裹內容的父盒子在設定overfl...
CSS3自定義瀏覽器滾動條樣式
話不多說直接上 滾動條樣式 webkit scrollbar 滾動條整體樣式 width 4px 高寬分別對應橫豎滾動條的尺寸 height 4px webkit scrollbar thumb 滾動條裡面小方塊 border radius 5px webkit box shadow inset 0...