萬惡的瀏覽器相容 看人家chrome多麼友好，幾行css就能自定義樣式，ie和火狐各種不行，如果只要求部分相容的可以直接用css寫 chorme

<div class="bar"></div>

.bar{
width:200px;
height:200px;
overflow-y:scroll;
}
.bar::-webkit-scrollbar {/*滾動條整體樣式*/
        width: 10px;     /*高寬分別對應橫豎滾動條的尺寸*/
        height: 1px;
    }
.bar::-webkit-scrollbar-thumb {/*滾動條裡面小方塊*/
        border-radius: 10px;
         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #535353;
    }
.bar::-webkit-scrollbar-track {/*滾動條裡面軌道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDED;
    }
 

IE

IE比較少，都以顏色為主 
1.scrollbar-arrow-color: color; /三角箭頭的顏色/ 
2.scrollbar-face-color: color; /立體滾動條的顏色（包括箭頭部分的背景色）/ 
3.scrollbar-3dlight-color: color; /立體滾動條亮邊的顏色/ 
4.scrollbar-highlight-color: color; /滾動條的高亮顏色（左陰影？）/ 
5.scrollbar-shadow-color: color; /立體滾動條陰影的顏色/ 
6.scrollbar-darkshadow-color: color; /立體滾動條外陰影的顏色/ 
7.scrollbar-track-color: color; /立體滾動條背景顏色/ 
8.scrollbar-base-color:color; /滾動條的基色/
 

.bar{  
        scrollbar-arrow-color: #f4ae21; /**//*三角箭頭的顏色*/   
        scrollbar-face-color: #333; /**//*立體滾動條的顏色*/   
        scrollbar-3dlight-color: #666; /**//*立體滾動條亮邊的顏色*/   
        scrollbar-highlight-color: #666; /**//*滾動條空白部分的顏色*/   
        scrollbar-shadow-color: #999; /**//*立體滾動條陰影的顏色*/   
        scrollbar-darkshadow-color: #666; /**//*立體滾動條強陰影的顏色*/   
        scrollbar-track-color: #666; /**//*立體滾動條背景顏色*/   
        scrollbar-base-color:#f8f8f8; /**//*滾動條的基本顏色*/   
    } 

 

 <link rel="stylesheet" href="./PC/css/jquery.mCustomScrollbar.min.css" />

js

  <script src="./PC/js/jquery.mCustomScrollbar.concat.min.js"></script>

使用

  ( function ( $ )
            {
                $( window ).on( "load", function ()
                {
                    $( ".ScrollBar" ).mCustomScrollbar();
                } );
            } )( jQuery );