CSS3實現改變捲軸樣式

標籤：寫法   ref   修改   pie   min   type   相容   移動   Firefox   

/*定義捲軸高寬及背景 高寬分別對應橫豎捲軸的尺寸*/  ::-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

上述樣式是指標對Google瀏覽器生效的。（不相容Firefox，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; /*捲軸的基色*/

  令人遺憾的是 Firefox目前還沒有修改捲軸樣式的 CSS支援

  不過我們可以利用外掛程式，比較好的外掛程式有 malihu-custom-scrollbar-plugin 

  使用方法如下：

<link rel="stylesheet" ref="js/jquery.mCustomScrollbar.min.css"><script type="text/javascript" src="js/jquery-1.11.1.min.js"></script><script src="js/jquery.mCustomScrollbar.concat.min.js"></script><script>if (!$.browser.webkit) {$.mCustomScrollbar.defaults.scrollButtons.enable=true;$.mCustomScrollbar.defaults.axis="yx";$(".container").mCustomScrollbar({theme:"dark"});</script>

 

CSS3實現改變捲軸樣式