ie内核和webkit内核css滚动条样式

如果在您看够了您的主页中灰色的滚动条,想让他变一种颜色,您该怎么办呢? 其实这很简单,插入一段代码就能实现了(必须是IE5以上,或者是以IE5为内核的浏览器)。

参数说明:

1、overflow-y : 设置当对象的内容超过其指定高度时如何管理内容;overflow-x : 设置当对象的内容超过其指定宽度时如何管理内容。

参数:

visible:扩大面积以显示所有内容

auto:仅当内容超出限定值时添加滚动条

hidden:总是隐藏滚动条

scroll:总是显示滚动条

2、height : 设置滚动条的高度(修改其后数值即可)。

3、滚动条颜色参数设置:

scrollbar-3d-light-color 设置或检索滚动条亮边框颜色

scrollbar-highlight-color 设置或检索滚动条3D界面的亮边(ThreedHighlight)颜色

scrollbar-face-color  设置或检索滚动条3D表面(ThreedFace)的颜色

scrollbar-arrow-color  设置或检索滚动条方向箭头的颜色

scrollbar-shadow-color  设置或检索滚动条3D界面的暗边(ThreedShadow)颜色

scrollbar-dark-shadow-color 设置或检索滚动条暗边框(ThreedDarkShadow)颜色

scrollbar-base-color  设置或检索滚动条基准颜色

webkit内核的写法稍有不同

下面来看例子:

ie内核:

*{
scrollbar-3dlight-color:#D4D0C8; 
   scrollbar-highlight-color:#fff; 
   scrollbar-face-color:#E4E4E4; 
   scrollbar-arrow-color:#666; 
   scrollbar-shadow-color:#808080; 
   scrollbar-darkshadow-color:#D7DCE0; 
   scrollbar-base-color:#D7DCE0; 
   scrollbar-track-color:#;
}
webkit内核:
/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-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); 
}

 

zhaoan

一个不起眼的IT工作者,从事过的行业较多,医疗保健、医院、月子会所、机电、重卡、软件,涉及的岗位也较多,零售、市场、平面设计、网站设计、UI设计、前端开发、后端开发、网络布线、设备维护、服务器维护、网络推广、网站运营、新媒体运营、部门管理等等,每个岗位工作基本都能独立完成,但是涉及面广导致都不精通,学习还在继续中。。。

You may also like...