-webkit-scrollbar

-webkit-scrollbar

在IE中可以自定义滚动条的样式 ，基于webkit的浏览器现在也可以自定义其样式：


::-webkit-scrollbar                    { /* 1 */ }
::-webkit-scrollbar-button        { /* 2 */ }  
::-webkit-scrollbar-track           { /* 3 */ }  
::-webkit-scrollbar-track-piece  { /* 4 */ }  
::-webkit-scrollbar-thumb         { /* 5 */ }  
::-webkit-scrollbar-corner         { /* 6 */ }  
::-webkit-resizer                       { /* 7 */ } 

 

 1     #tasks::-webkit-scrollbar {
 2             width:6px;
 3             height:6px;
 4             border: none;
 5             background: transparent;
 6     }
 7     #tasks::-webkit-scrollbar-track-piece {
 8             border: none;
 9             position: absolute;
10             padding: 0;
11             box-shadow: none;
12             background-color: rgba(0,0,0,0.17);
13             border-radius: 30px;
14     }
15     #tasks::-webkit-scrollbar-thumb:vertical {
16             background-color: rgba(0,0,0,0.18);
17             border-radius: 30px;
18             border: none;
19     }
20     #tasks::-webkit-scrollbar-thumb:horizontal {
21             background-color: rgba(0,0,0,0.18);
22             border-radius: 30px;
23             border: none;
24     }

 

 

 

posted @ 2013-10-10 22:01  Zimin  阅读(524)  评论(0)  编辑  收藏  举报