css之-webkit-scrollbar_html/css_WEB-ITnose

You can customize the style of the scroll bar in IE, and webkit-based browsers can now customize its style:

::-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;

}

410e38985a3c1e8b5219c50cd6add5b9kfalsdfjlasjldf16b28748ea4df4d9c2150843fecfba68

Reference:

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