html滚动条样式设置说明

发布时间:2020-12-28编辑:脚本学堂
有关html滚动条样式的设置方法,overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容,感兴趣的朋友参考下。

这篇文章有点旧了,所讲的html滚动条样式,只针对Internet Explorer 5.5+ 浏览器,不过对于了解html滚动条的实现方法,还是有帮助的。

滚动条样式,需要用到以下css属性:
 

overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容
overflow: auto; 在需要时内容会自动添加滚动条
overflow: scroll; 总是显示滚动条
overflow-x: hidden; 禁止横向的滚动条
overflow-y: scroll; 总是显示纵向滚动条
width: 568px; width: 98%; 设置区域的宽度[像素/百分比等等]
height: 120px; 设置区域的高度[像素/百分比等等]

注意,以下仅适用于IE 5.5+的浏览器样式:
scrollbar-base-color:#006699;

设置基色设置,该选项后可以不设置以下属性, 浏览器会依据基色自动调整。

包括:
 

scrollbar-track-color:rgb(10,100,254); 底板轨迹颜色
scrollbar-3dlight-color: ; 上/左边沿亮边颜色
scrollbar-arrow-color: ; 两端箭头颜色
scrollbar-darkshadow-color: ; 下/右边沿颜色
scrollbar-face-color: ; 表面颜色
scrollbar-highlight-color: ; 上/左斜面亮边框颜色
scrollbar-shadow-color:; 下/右斜面暗边框颜色

效果图:
html滚动条样式设置