關於css：scrollbar-face-color只支援ie的解決方案

今天突然有人問我捲軸css自訂的方法，我發現用scrollbar-base-color這種方法只有ie支援，查了半天資料總結如下！！！

IE瀏覽器中自訂捲軸樣式：

HTML {   scrollbar-base-color: #C0C0C0;   scrollbar-base-color: #C0C0C0;   scrollbar-3dlight-color: #C0C0C0;   scrollbar-highlight-color: #C0C0C0;   scrollbar-track-color: #EBEBEB;   scrollbar-arrow-color: black;   scrollbar-shadow-color: #C0C0C0;   scrollbar-dark-shadow-color: #C0C0C0;   }

解釋：
介紹一下涉及瀏覽器捲軸的樣式表內容（某些樣式需ie5.5+才能支援）：
1．overflow內容溢出時的設定（設定被設定對象是否顯示捲軸）
overflow-x水平方向內容溢出時的設定
overflow-y垂直方向內容溢出時的設定
以上三個屬性設定的值為visible(預設值)、scroll、hidden、auto。

2．scrollbar-3d-light-color立體捲軸亮邊的顏色（設定捲軸的顏色）
scrollbar-arrow-color上下按鈕上三角箭頭的顏色
scrollbar-base-color捲軸的基本顏色
scrollbar-dark-shadow-color立體捲軸強陰影的顏色
scrollbar-face-color立體捲軸凸出部分的顏色
scrollbar-highlight-color捲軸空白部分的顏色
scrollbar-shadow-color立體捲軸陰影的顏色

CHROME瀏覽器中自訂捲軸樣式：

::-webkit-scrollbar { width: 3px; height: 3px;}   ::-webkit-scrollbar-track-piece { background-color: #ffffff;}   ::-webkit-scrollbar-thumb{height: 50px; background-color: #666; -webkit-border-radius: 3px;}

解釋：

::-webkit-scrollbar 捲軸寬跟高 ::-webkit-scrollbar-track-piece 捲軸樣式底部內層樣式 ::-webkit-scrollbar-thumb 捲軸滑塊樣式 -webkit-border-radius: 捲軸滑塊邊角–導圓角

FireFox下自訂捲軸：

/* 捲軸顏色 */  scrollbar {      -moz-appearance: none !important;      background: rgb(0,255,0) !important;   }   /* 捲軸按鈕顏色 */  thumb,scrollbarbutton {      -moz-appearance: none !important;      background-color: rgb(0,0,255) !important;   }   /* 滑鼠移至上方時按鈕顏色 */    thumb:hover,scrollbarbutton:hover {      -moz-appearance: none !important;      background-color: rgb(255,0,0) !important;   }   /* 隱藏上下箭頭 */  scrollbarbutton {      display: none !important;   }   /* 縱向捲軸寬度 */  scrollbar[orient="vertical"] {     min-width: 15px !important;   }   }

FF下用JS實現自訂捲軸：

JS

<script type=“text/javascript” src=“JQUERY-1.1.3.1.js”></script>    <script type=“text/javascript” src=“jquery.linscroll.js“></script>    <script type=“text/javascript”>    $(document).ready(    function(){    $(’#scrollContent’).setScroll( //scrollContent為滾動層的ID {img:scroll_bk.gif’,width:10},//背景圖及其寬度    {img:scroll_arrow_up.gif’,height:3},//up image    {img:scroll_arrow_down.gif’,height:3},//down image    {img:scroll_bar.gif’,height:25}//bar image    );});      </script>  HTML <div id=“scrollContent” style=“width:140px;overflow:hidden;height:170px;”>內容</div>