默认的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如下：
var duma = {
$:function(o){ if(document.getElementById(o)) {return document.getElementById(o);} },
getStyle:function(o) { return o.currentStyle||document.defaultView.getComputedStyle(o,null); },
getOffset:function(o) {
var t = o.offsetTop,h = o.offsetHeight;
while(o = o.offsetParent) { t += o.offsetTop; }
return { top:t, height:h };
},
bind:function(o,eType,fn) {
if(o.addEventListener) { o.addEventListener(eType,fn,false); }
else if(o.attachEvent) { o.attachEvent("on" + eType,fn); }
else { o["on" + eType] = fn; }
},
stopEvent:function(e) {
e = e || window.event;
e.stopPropagation && (e.preventDefault(),e.stopPropagation()) || (e.cancelBubble = true,e.returnValue = false);
},
setCookie:function(c_name,value,expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
},
getCookie:function(c_name) {
if(document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if(c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";",c_start);
if(c_end == -1) { c_end = document.cookie.length; }
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}
};
duma.BeautifyScrollBar = function(obj,arrowUpCss,arrowUpActiveCss,handleCss,handleActiveCss,arrowDownCss,arrowDownActiveCss) {
this.arrowUpInterval;
this.arrowDownInterval;
this.barMouseDownInterval;
this.relY;
this.id = obj;
this.obj = duma.$(this.id);
this.setObjCss(); //预先设置父容器的css定位才能让接下来的属性设置起作用
this.obj.innerHTML = '<div >,duma.BeautifyScrollBar.init);