更改IE、Chrome滚动条样式

滚动条基本上是每个网站都会出现的,如:当父元素的长宽小于包含元素时,且设置了overflow:auto;此时滚动条就会出现。当然最常见的是body出现的滚动条了,即我们所看到浏览器的右边和下边的滚动条。另外老版本IE开始就支持overflow-x/y属性了,css3也增加了这两个属性,就目前来说浏览器基本支持overflow-x/y属性。

有时候我们想更改滚动条的样式以达到滚动条与网页在视觉上协调的效果,但在不同的浏览器上实现的方式不同。这里主要介绍IE和webkit内核的chrome浏览器,firfox目前貌似还无法更改。

IE下的实现:

body{ 
    scrollbar-face-color:green; /*滚动条颜色*/  
    scrollbar-arrow-color:red; /*上下箭头颜色*/ 
    scrollbar-3dlight-color:#C0C0C0; /*左侧外边线颜色*/  
    scrollbar-highlight-color:#FFFFFF; /*左侧内边线颜色*/  
    scrollbar-shadow-color:#FFFFFF; /*右内边线颜色*/  
    scrollbar-darkshadow-color:#C0C0C0; /*右外边线颜色*/  
    scrollbar-track-color:#blue /*滑道颜色*/  
}

 

效果如图:BaiduShurufa_2015-3-10_19-34-5.png

由于电脑装的IE是11,对于scrollbar-3dlight-color、scrollbar-highlight-color、scrollbar-shadow-color、scrollbar-darkshadow-color 的效果不明显,这里我找了网上的一些图作为参考,地址:http://www.educity.cn/wenda/150082.html

scrollbar-3dlight-color: #f00;改变左侧外边线的颜色,如图:BaiduShurufa_2015-3-10_20-13-11.png


scrollbar-highlight-color: #f00;改变左侧内边线的颜色,如图:BaiduShurufa_2015-3-10_20-13-51.png


scrollbar-shadow-color: #f00;改变右侧内边线的颜色,如图:BaiduShurufa_2015-3-10_20-14-25.png


scrollbar-darkshadow-color: #f00;改变右侧外边线的颜色,如图:BaiduShurufa_2015-3-10_20-15-1.png


那么webkit内核的chrome是怎实现呢?

/*滚动条整体*/  
::-webkit-scrollbar{  
    width:40px; /*滚动条宽度*/  
}


/*滚动条上下的按钮*/  
::-webkit-scrollbar-button {  
    background-color:red;
}

如图:BaiduShurufa_2015-3-10_20-17-55.png


/*滑道全部*/ 
::-webkit-scrollbar-track{  
    background-color:green;  
}

如图绿色部分:BaiduShurufa_2015-3-10_20-21-53.png



/*滑道*/  
::-webkit-scrollbar-track-piece{  
    background-color:#F3F3F3;   
    border-radius:10px; /*滑道圆角宽度*/  
}

如图蓝色部分:BaiduShurufa_2015-3-10_20-23-45.png,,注意:scrollbar-trank-piece是在scrollbar-trank上面的


/*滑动条*/
::-webkit-scrollbar-thumb{  
    background-color:#F3F3F3; /*滑动条表面*/  
     border:solid 2px #C0C0C0; /*滑动条边框*/  
    border-radius:4px;  /*滑动条圆角宽度*/  
}
 /*横竖滚动条交角*/  
::-webkit-scrollbar-corner {  
    background-color: blue;  
}  
/*鼠标滑过滑动条*/  
::-webkit-scrollbar-thumb:hover{  
    background-color:#F3F3E0;  
}

 

倘若我们想单独针对横竖的滑动条更改样式,只须在除scroller-corner外的其他选择器加上:vertical或:horizontal,如

::-webkit-scrollbar-thumb:vertical{
/*竖方向的滑块*/
 } 
::-webkit-scrollbar-thumb:horizontal{
/*横方向的滑块*/
 }