关于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如下：

.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如下：