当前位置: 代码迷 >> 综合 >> css之-webkit-scrollbar 浏览器滚动条
  详细解决方案

css之-webkit-scrollbar 浏览器滚动条

热度:42   发布时间:2024-01-14 14:23:40.0

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

}

 

<div class="test">kfalsdfjlasjldf</div>

 

参考:

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

  相关解决方案