说明
许多浏览器对滚动条的样式是不一样的,比IE下和chrome下就好区别很多,而且它们的代码实现也是不一样的
下面就实现一下IE下和chrome下的滚动条样式
一、chrome(webkit)下滚动条
主要有下面7个属性:
1.::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
2.::-webkit-scrollbar-button 滚动条两端的按钮
3.::-webkit-scrollbar-track 外层轨道
4.::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
5.::-webkit-scrollbar-thumb 拖动条,滑块
6.::-webkit-scrollbar-corner 边角
7.::-webkit-resizer 定义右下角拖动块的样式
对应位置
chrome下对三角形设置没有IE完好的
实践代码
::-webkit-scrollbar{
width:10px;
background:green;/* 整个滚条背景 */
}
::-webkit-scrollbar-thumb{
-webkit-border-radius:4px;
border-radius:4px;
background:red; /* 滚条内嵌颜色 */
}
::-webkit-scrollbar-button {
background-color:red;/* 两边端按钮颜色 */
}
二、IE设置滚动条
IE比较少,都以颜色为主
1.scrollbar-arrow-color: color; /三角箭头的颜色/
2.scrollbar-face-color: color; /立体滚动条的颜色(包括箭头部分的背景色)/
3.scrollbar-3dlight-color: color; /立体滚动条亮边的颜色/
4.scrollbar-highlight-color: color; /滚动条的高亮颜色(左阴影?)/
5.scrollbar-shadow-color: color; /立体滚动条阴影的颜色/
6.scrollbar-darkshadow-color: color; /立体滚动条外阴影的颜色/
7.scrollbar-track-color: color; /立体滚动条背景颜色/
8.scrollbar-base-color:color; /滚动条的基色/
对应位置
实践代码
<style type="text/css">
html{
scrollbar-arrow-color: #f4ae21; /**//*三角箭头的颜色*/
scrollbar-face-color: #333; /**//*立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜色*/
scrollbar-highlight-color: #666; /**//*滚动条空白部分的颜色*/
scrollbar-shadow-color: #999; /**//*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666; /**//*立体滚动条强阴影的颜色*/
scrollbar-track-color: #666; /**//*立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8; /**//*滚动条的基本颜色*/
}
</style>
如果想在某个div中使用滚动条,只需要给div个id就好,
webkit形式就如: #scroll::-webkit-scrollbar
IE形式就如: #scroll{
scrollbar-arrow-color: #f4ae21; /*//三角箭头的颜色*/
}
三、overflow隐藏滚动条
1.去掉横向滚动条:< body style=’overflow:scroll;overflow-x:hidden’>
2.去掉竖向滚动条:< body style=’overflow:scroll;overflow-y:hidden’>
3.两个都去掉:< body scroll=”no”>
4.框架中去滚动条在name=”“后面加 scrolling=”No”