webkit滚动条样式

样式"/>

webkit滚动条样式

::-webkit-scrollbar { width: 3px; height: 3px;}
/*width:纵向滚动条的宽度；height：横向滚动条的高度；*/
::-webkit-scrollbar-track-piece { background-color: #000;-webkit-border-radius: 6px;}
/*滚动条样式底部导轨样式;可设置（背景）颜色和圆角半径*/
::-webkit-scrollbar-thumb{background-color: #999; -webkit-border-radius: 6px;}
/*滚动条滑块样式;*/
::-webkit-scrollbar-thumb:vertical{}/*纵向滚动条滑块样式;*/
::-webkit-scrollbar-thumb:horizontal{}/*横向滚动条滑块样式;*/

可以发现webkit的滚动条设置很简单
对比一下IE的：

Body {scrollbar-base-color:#3ff;  /*滚动条的大体颜色（各种被覆盖）*/scrollbar-highlight-color: #00f;  /*滚动条空白部分颜色（被滚动条导轨颜色覆盖）*/scrollbar-track-color: #000;  /*滚动条导轨颜色*/scrollbar-arrow-color: #f4ae21;  /*滚动条两端箭头颜色*/scrollbar-face-color: #f00;  /*滚动条表面颜色*/    scrollbar-shadow-color: #f3f;  /*滚动条边缘颜色*/scrollbar-darkshadow-color: #ff0;  /*看不出这个设置作用在哪*/scrollbar-3dlight-color: #0f0;  /*看不出这个设置作用在哪*/
}

没找到设置滚动条粗细的，这可是最最需要的功能了，圆角也没有，颜色倒是很详细。。。结果就是设了也没啥意思

本来也顺手查了下Firefox的滚动条设置的，结果没效果？可能是我不会弄吧。。。

@-moz-document url-prefix() {/* 滚动条颜色 */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;}
}