滚动条(自定义)

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; /*滚动条的基色*/

 

webkit:

-webkit-scrollbar 滚动条整体部分
-webkit-scrollbar-button 滚动条两端的按钮
-webkit-scrollbar-track 外层轨道
-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
-webkit-scrollbar-thumb (拖动条?滑块?滚动条里面可以拖动的那个,肿么翻译好呢?)
-webkit-scrollbar-corner 边角
-webkit-resizer 定义右下角拖动块的样式

 

例子:

webkit:

body{
height: 1000px;

body::-webkit-scrollbar{/*滚动条整体部分*/
width:5px;
}
body::-webkit-scrollbar-thumb{/*中间滚动条的颜色设置*/
background:rgba(0,0,0,.7);
border-radius:4px;
}

posted @ 2016-06-16 14:29  刘~燕  阅读(81)  评论(0)    收藏  举报