您的当前位置:首页正文

css之-webkit-scrollbar_html/css

2020-11-27 来源:小奈知识网

在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 */ } 

::-webkit-scrollbar {

width: 12px;

}

::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

-webkit-border-radius: 10px;

border-radius: 10px;

border:1px solid #666666

}

::-webkit-scrollbar-thumb {

-webkit-border-radius: 10px;

border-radius: 10px;

background: rgba(255,0,0,0.8);

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

}

::-webkit-scrollbar-thumb:window-inactive {

background: rgba(255,0,0,0.4);

}

.test{

width:100px;

height:200px;

overflow:scroll;

border:1px solid #666666;

}

kfalsdfjlasjldf

参考:

http://www.webkit.org/blog/363/styling-scrollbars/

http://css-tricks.com/9130-custom-scrollbars-in-webkit/

http://www.spectrum-research.com/V2/projects_scrollbar_generator.asp

显示全文