/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/ ::-webkit-scrollbar { width: 16px; /*滾動條寬度*/ height: 16px; /*滾動條高度*/ } /*定義滾動條軌道 內陰影+圓角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; /*滾動條的背景區域的圓角*/ background-color: red;/*滾動條的背景顏色*/ } /*定義滑塊 內陰影+圓角*/ ::-webkit-scrollbar-thumb { border-radius: 10px; /*滾動條的圓角*/ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: green; /*滾動條的背景顏色*/ }
- ::-webkit-scrollbar 滾動條整體部分
- ::-webkit-scrollbar-thumb 滾動條里面的小方塊，能向上向下移動（或往左往右移動，取決於是垂直滾動條還是水平滾動條）
- ::-webkit-scrollbar-track 滾動條的軌道（里面裝有Thumb）
- ::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，允許通過點擊微調小方塊的位置。
- ::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）
- ::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處
- ::-webkit-resizer 兩個滾動條的交匯處上用於通過拖動調整元素大小的小控件
想給單個節點設置滾動條，即在上面的偽類前面加上 ID/樣式名字：例如：
.scroll_style::-webkit-scrollbar
{
width: 16px; /*滾動條寬度*/
height: 16px; /*滾動條高度*/
}
詳細信息請參考 http://blog.csdn.net/hanshileiai/article/details/40398177
上述樣式是指針對谷歌瀏覽器生效的。（不兼容火狐，IE）
IE 的寫法和上面不太一樣
- scrollbar-arrow-color: color; /*三角箭頭的顏色*/
- scrollbar-face-color: color; /*立體滾動條的顏色（包括箭頭部分的背景色）*/
- scrollbar-3dlight-color: color; /*立體滾動條亮邊的顏色*/
- scrollbar-highlight-color: color; /*滾動條的高亮顏色（左陰影？）*/
- scrollbar-shadow-color: color; /*立體滾動條陰影的顏色*/
- scrollbar-darkshadow-color: color; /*立體滾動條外陰影的顏色*/
- scrollbar-track-color: color; /*立體滾動條背景顏色*/
- scrollbar-base-color:color; /*滾動條的基色*/
令人遺憾的是 火狐目前還沒有修改滾動條樣式的 CSS支持
不過我們可以利用插件，比較好的插件有 malihu-custom-scrollbar-plugin
使用方法如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <link href="../css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" /> <script src="../js/jquery-1.11.1.js"></script> <script src="../js/jquery-ui-1.10.4.min.js"></script> <script src="../js/jquery.mousewheel-3.0.6.min.js"></script> <script src="../js/jquery.mCustomScrollbar.min.js"></script> <style> ._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background:red; width:10px; } ._mCS_1 .mCSB_scrollTools .mCSB_draggerRail{ background:blue; width:5px; } </style> <body> <div class="content" style="width:500px;height:500px;overflow-y:auto;border:1px solid green;"> <div style="height:900px;"></div> </div> <script type='text/javascript'> (function($){ $(window).load(function(){ $(".content").mCustomScrollbar({ scrollButtons:{ enable:false,//是否添加 滾動條兩端按鈕支持 值:true,false scrollType:"continuous",//滾動按鈕滾動類型 值:”continuous”(當你點擊滾動控制按鈕時斷斷續續滾動) “pixels”(根據每次點擊的像素數來滾動) scrollSpeed:50,//設置點擊滾動按鈕時候的滾動速度(默認 20) scrollAmount:60//設置點擊滾動按鈕時候每次滾動的數值 像素單位 默認 40像素 }, horizontalScroll:false,//是否創建一個水平滾動條 默認是垂直滾動條 set_width:false,//：設置你內容的寬度 值可以是像素或者百分比 set_height:false,//：設置你內容的高度 值可以是像素或者百分比 mouseWheel:true,//鼠標滾動的支持 值為:true.false //mouseWheelPixels:10,//：鼠標滾動中滾動的像素數目(step) 值為以像素為單位的數值 callbacks:{ onScrollStart:function(){//使用自定義的回調函數在滾動時間開始的時候執行 }, onScroll:function(){//自定義回調函數在滾動中執行 }, onTotalScroll:function(){//當滾動到底部的時候調用這個自定義回調函數 }, onTotalScrollBack:function(){//當滾動到頂部的時候調用這個自定義回調函數 }, onTotalScrollOffset:10,//設置到達頂部或者底部的偏移量 像素單位 whileScrolling:function(){//當用戶正在滾動的時候執行這個自定義回調函數 }, whileScrollingInterval:10,//設置調用 whileScrolling 回調函數的時間間隔 毫秒單位 } }); }); })(jQuery); </script> </body> </html>
其中 mCustomScrollbar.css + jquery.js + jquery-ui.js + mousewheel.js + mCustomScrollbar.js 這5個必須引入。注意引入順序
令人遺憾的人，滾動條的樣式不可以配置，需要手動寫入樣式(我也是醉了)
如果頁面上有需要配置的多個滾動條
._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* 1st scrollbar dragger style... */ } ._mCS_2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* 2nd scrollbar dragger style... */ } ._mCS_3 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* 3rd scrollbar dragger style... */ }
上面的代碼可以這樣理解 mCSB_dragger 下面的 mCSB_dragger_bar 當然你對這個層級有點懵逼。還好官方有個圖片指示對應的結構
根據這張圖片，就可以很容易的定義滾動條的樣式了。
._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background:red; width:10px; } ._mCS_1 .mCSB_scrollTools .mCSB_draggerRail{ /*這個就對應圖片修改滾動條的背景色*/
background:blue; width:5px; }
修改樣式 就對應上面的圖片 看他們的層級和名字 修改對應的樣式即可