两种自定义html滚动条
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:admin 阅读 676
默认的html滚动条很难看,一些漂亮的网站,滚动条都是针对网站整体样式配套设计的。在网上搜索到两种改造方式。一种是给默认滚动条设置样式,另一种是使用设计好的图片+css+js。都挺好用的。第一种(纯

默认的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
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 id="' + obj + 'Area" class="dumascroll_area">' + this.obj.innerHTML + '</div><div id="' + obj + 'Bar" class="dumascroll_bar"><div class="dumascroll_arrow_up"></div><div class="dumascroll_handle"></div><div class="dumascroll_arrow_down"></div></div>';
this.area = duma.$(obj + "Area");
this.bar = duma.$(obj + "Bar");
this.barPos;
this.arrowUp = this.bar.getElementsByTagName("div")[0];
this.arrowUpCss = arrowUpCss;
this.arrowUpActiveCss = arrowUpActiveCss;
this.handle = this.bar.getElementsByTagName("div")[1];
this.handleCss = handleCss;
this.handleActiveCss = handleActiveCss;
this.arrowDown = this.bar.getElementsByTagName("div")[2];
this.arrowDownCss = arrowDownCss;
this.arrowDownActiveCss = arrowDownActiveCss;
this.handleMinHeight = 15;
this.arrowUpHeight = parseInt(duma.getStyle(this.arrowUp).height);
this.arrowDownHeight = parseInt(duma.getStyle(this.arrowDown).height);
this.areaScrollHeight = this.area.scrollHeight;
this.handleHeight = parseInt(this.area.offsetHeight/this.area.scrollHeight * (this.bar.offsetHeight - this.arrowUpHeight - this.arrowDownHeight));
}
duma.BeautifyScrollBar.prototype
= {
setObjCss:
function() {
duma.getStyle(
this.obj).position == "static" ? this.obj.style.position = "relative" : duma.getStyle(this.obj).backgroundColor == "transparent" ? this.obj.style.backgroundColor = "#fff" : null; //若容器本来就没有设position,则初始化为relative;若容器原来未设置背景色,则初始化为白色;
},
sethandle:
function() { //当内容超多时设置拖拽条子的最小高度
this.handle.style.top = this.arrowUpHeight + "px";
if(this.handleHeight > this.handleMinHeight) {
this.handleHeight < this.bar.offsetHeight - this.arrowUpHeight - this.arrowDownHeight ? this.handle.style.height = this.handleHeight + "px" : this.handle.style.display =
联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2