默认的html滚动条很难看,一些漂亮的网站,滚动条都是针对网站整体样式配套设计的。
在网上搜索到两种改造方式。一种是给默认滚动条设置样式,另一种是使用设计好的图片+css+js。
都挺好用的。
第一种(纯css):完成后
.div{
scrollbar-face-color: #ebebeb;
scrollbar-shadow-color: #ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color: #d8d8d8;
scrollbar-darkshadow-color: #d8d8d8;
scrollbar-track-color:#ffffff;
scrollbar-arrow-color: #686868;
}
说明:
scrollbar-face-color 滚动条凸出部分的颜色
scrollbar-shadow-color 立体滚动条阴影的颜色
scrollbar-highlight-color 滚动条空白部分的颜色
scrollbar-3dlight-color 滚动条亮边的颜色
scrollbar-darkshadow-color 滚动条强阴影的颜色
scrollbar-track-color 滚动条的背景颜色
scrollbar-arrow-color 上下按钮上三角箭头的颜色
scrollbar-base-color 滚动条的基本颜色
第二种(css+图片+js,这是网上找的。谢谢原作者):我自己页面使用的效果。
本例的css,图片,js直接拷贝就能用,js支持键盘上下方向键。
滚动条使用的图片如下(可以自行修改):
下图一共是7个小图,从左到右分别是:
默认上箭头,按下时的上箭头,按下时的滚动块,背景,默认滚动块,默认下箭头,按下时的下箭头。
我这张图片做的简单。没有背景色,默认和按下的样子是一样的。不喜欢的同学可以自己改改~~
滚动条的css如下:
.dumascroll {}/*只需对需要渲染滚动条的div设置该class即可,div要固定高度,超出部分设置隐藏,显示纵向滚动条。*/
.dumascroll_area { height:100%;overflow:hidden;}
.dumascroll_bar,.dumascroll_handle,.dumascroll_handle_a,.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a { background-image:url(../images/un_bg_bar.gif);}
.dumascroll_bar { position:absolute; top:0; right:0; z-index:9; width:14px; height:100%; cursor:default; -moz-user-select:none; -khtml-user-select:none; user-select:none; background-repeat:repeat-y; background-position:-42px 0; float:left;}
.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_handle,.dumascroll_handle_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a { position:absolute; left:0;}
.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a { width:100%; height:14px; color:#fff; text-align:center;}
.dumascroll_arrow_up,.dumascroll_arrow_up_a { top:0;}
.dumascroll_arrow_down,.dumascroll_arrow_down_a { bottom:0;}
.dumascroll_handle,.dumascroll_handle_a { width:100%; background-repeat:repeat-y;}
.dumascroll_arrow_up { background-position:0 0;}
.dumascroll_arrow_up_a { background-position:-14px 0;}
.dumascroll_handle { background-position:-28px 0;}
.dumascroll_handle_a { background-position:-56px 0;}
.dumascroll_arrow_down { background-position:-70px 0;}
.dumascroll_arrow_down_a { background-position:-84px 0;}
js如下:
View Code