关于HTML中的滚动条/去掉滚动条
默认的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如下：
View Code
.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
