关于scrollbar-face-color只支持ie的解决方法！！
zhouguizhi 2013-02-28
今天突然有人问我滚动条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下自定义滚动条：(或许有些问题，参考http://g.mozest.com/thread-38113-1-1)
@-moz-documenturl-prefix(http://),url-prefix(https://){
/*滚动条颜色*/
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
<scripttype=“text/javascript”src=“JQUERY-1.1.3.1.js”></script>
<scripttype=“text/javascript”src=“jquery.linscroll.js“></script>
<scripttype=“text/javascript”>
$(document).ready(
function(){
$(’#scrollContent’).setScroll(//scrollContent为滚动层的ID
{img:scroll_bk.gif’,width:10},//背景图及其宽度
{img:scroll_arrow_up.gif’,height:3},//upimage
{img:scroll_arrow_down.gif’,height:3},//downimage
{img:scroll_bar.gif’,height:25}//barimage
);});
</script>
HTML
<divid=“scrollContent”style=“width:140px;overflow:hidden;height:170px;”>内容</div>
