自定義滾動條樣式相容所有瀏覽器
阿新 • • 發佈:2018-12-19
萬惡的瀏覽器相容 看人家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 );