`
ayue222
  • 浏览: 47867 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

自定义滚动条

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* { margin:0; padding:0; }
body { margin:20px 0 400px 20px; font:12px Arial; }
h1 { font-size:14px; }
ol,ul { margin:20px; line-height:160%; }
ul li { color:#f00; }
.a1 { width:300px; height:190px; border:1px solid #f00; overflow:auto; }
.a2 { width:600px; height:350px; margin:100px 0 100px 80px; border:1px solid #369; background:#eee url(http://www.zbw123.com/webmaster/ximenScrollBar/images/duma.gif) no-repeat 50%; overflow:auto; }
.dumascroll {}  /*只需对需要渲染滚动条的div设置该class即可*/
.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(http://www.zbw123.com/webmaster/ximenScrollBar/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; }
</style>
<  script  >
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 = "none";
  }
  else { this.handleHeight = this.handleMinHeight; this.handle.style.height = this.handleMinHeight + "px"; }
 },
 setBarPos:function() {    //将当前滚动的距离值存入cookie
  this.barPos = this.area.scrollTop + "";
  duma.setCookie(this.id + "CookieName",this.barPos,1);
 },
 getBarPos:function() {
  this.barPos = duma.getCookie(this.id + "CookieName");
  if(this.barPos!=null && this.barPos!="") {
   this.area.scrollTop = this.barPos;
   this.areaScroll();
  }
 },
 clearArrowUpInterval:function() { clearInterval(this.arrowUpInterval); },
 clearArrowDownInterval:function() { clearInterval(this.arrowDownInterval); },
 clearBarMouseDownInterval:function() { clearInterval(this.barMouseDownInterval); },
 areaScroll:function() {
  this.handle.style.display != "none" ? this.handle.style.top = this.area.scrollTop/(this.area.scrollHeight - this.area.offsetHeight) * (this.bar.offsetHeight - this.handleHeight - this.arrowUpHeight - this.arrowDownHeight) + this.arrowUpHeight + "px" : null;
 },
 areakeydown:function(e) {   //支持键盘上下按键
  var that = this;
  document.onkeydown = function(event) {
   var e = event || window.event,
   ek = e.keyCode || e.which;
   if(ek == 40) { that.area.scrollTop += 25 }
   else if(ek == 38) { that.area.scrollTop -= 25 }
   if(that.area.scrollTop > 0 && that.area.scrollTop < that.area.scrollHeight - that.area.offsetHeight){ duma.stopEvent(e); }
   that.setBarPos();
  }
 },
 handleMove:function(e) {
  var e = e || window.event;
  this.area.scrollTop = (e.clientY - this.relY - this.arrowUpHeight)/(this.bar.offsetHeight - this.handleHeight - this.arrowUpHeight - this.arrowDownHeight)*(this.area.scrollHeight - this.area.offsetHeight);
  this.setBarPos();
 },
 handleMouseDown:function(e) {
  var that = this,e = e || window.event;
  that.relY = e.clientY - that.handle.offsetTop;
  that.handle.setCapture ? that.handle.setCapture() : null;
  that.handle.className = that.handleActiveCss;
  document.onmousemove = function(event) { that.handleMove(event); };
  document.onmouseup = function() {
   that.handle.className = that.handleCss;
   that.handle.releaseCapture ? that.handle.releaseCapture() : null;
   document.onmousemove = null;
  };
 },
 barScroll:function(e) {
  var e = e || window.event,eDir;  //设置滚轮事件,e.wheelDelta与e.detail分别兼容IE、W3C,根据返回值的正负来判断滚动方向
  if(e.wheelDelta) { eDir = e.wheelDelta/120; }
  else if(e.detail) { eDir = -e.detail/3; }
  eDir > 0 ? this.area.scrollTop -= 80 : this.area.scrollTop += 80; //步长设80像素比较接近window滚动条的滚动速度
  if(this.area.scrollTop > 0 && this.area.scrollTop < this.area.scrollHeight - this.area.offsetHeight){ duma.stopEvent(e); }
  this.setBarPos();
 },
 barDown:function(e) {
  var e = e || window.event,that = this,
   eY = e.clientY,
   mStep = this.bar.offsetHeight,
   documentScrollTop = document.documentElement.scrollTop || document.body.scrollTop,
   hOffset = duma.getOffset(this.handle),
   bOffset = duma.getOffset(this.bar);
  if(documentScrollTop + eY < hOffset.top) { this.barMouseDownInterval = setInterval(function(e){
   that.area.scrollTop -= that.area.offsetHeight;
   if(that.area.scrollTop <= (eY + documentScrollTop - bOffset.top - that.arrowUpHeight)/(that.bar.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.area.scrollHeight) { that.clearBarMouseDownInterval(); }
   that.setBarPos();
  },80); }
  else if(documentScrollTop + eY > hOffset.top + hOffset.height) { this.barMouseDownInterval = setInterval(function(){
   that.area.scrollTop += that.area.offsetHeight;
   if(that.area.scrollTop >= (eY + documentScrollTop - bOffset.top - that.arrowUpHeight - hOffset.height)/(that.bar.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.area.scrollHeight) { that.clearBarMouseDownInterval(); }
   that.setBarPos();
  },80); }
  duma.stopEvent(e);
 },
 arrowUpMouseDown:function(e) {
  var that = this;
  this.arrowUpInterval = setInterval(function(){ that.area.scrollTop -= 25; that.setBarPos(); },10);
  this.arrowUp.className = this.arrowUpActiveCss;
  duma.stopEvent(e);
 },
 arrowUpMouseUp:function() { this.clearArrowUpInterval(); this.arrowUp.className = this.arrowUpCss; },
 arrowUpMouseOut:function() { this.clearArrowUpInterval(); this.arrowUp.className = this.arrowUpCss; },
 arrowDownMouseDown:function(e) {
  var that = this;
  this.arrowDownInterval = setInterval(function(){ that.area.scrollTop += 25; that.setBarPos(); },10);
  this.arrowDown.className = this.arrowDownActiveCss;
  duma.stopEvent(e);
 },
 arrowDownMouseUp:function() { this.clearArrowDownInterval(); this.arrowDown.className = this.arrowDownCss; },
 arrowDownMouseOut:function() { this.clearArrowDownInterval(); this.arrowDown.className = this.arrowDownCss; },
 run:function(){
  var that = this;
  this.sethandle();
  this.areaScroll();
  this.getBarPos();
  this.area.onscroll = function();
  this.area.onmouseover = this.bar.onmouseover = function(event);
  this.area.onmouseout = this.bar.onmouseout = function(){document.onkeydown = null};
  this.handle.onmousedown = function(event);
  this.bar.onmousedown = function(event);
  this.bar.onmouseup = function();
  this.bar.onmouseout = function();
  this.arrowUp.onmousedown = function(event);
  this.arrowUp.onmouseup = function();
  this.arrowUp.onmouseout = function();
  this.arrowDown.onmousedown = function(event);
  this.arrowDown.onmouseup = function();
  this.arrowDown.onmouseout = function();
  duma.bind(this.obj,"mousewheel",function(event));
  duma.bind(this.obj,"DOMMouseScroll",function(event));
 }
}
duma.BeautifyScrollBar.init = function() {
 var o = document.getElementsByTagName("div"),
  oLen = o.length,
  dumascrollClass = /\bdumascroll\b/,
  oArr = [],
  oArrLen = oArr.length;
 for(var i=0; i<oLen; i++) {
  if(dumascrollClass.test(o[i].className)) {
   oArr.push("dumaScrollAreaId_" + i);
   oArrLen = oArr.length;
   o[i].id = oArr[oArrLen - 1];
  }
 }
 for(var j=0; j<oArrLen; j++) {
  new duma.BeautifyScrollBar(oArr[j],"dumascroll_arrow_up","dumascroll_arrow_up_a","dumascroll_handle","dumascroll_handle_a","dumascroll_arrow_down","dumascroll_arrow_down_a").run();
 }
}
duma.bind(window,"load",duma.BeautifyScrollBar.init);
</  script  >
</head>
<body>
<div class="a dumascroll b" style="width:300px; height:190px; padding:5px; border:1px solid #f00; line-height:400%; overflow:hidden;">
    我是第一个被渲染的,真不幸<br />我是第一个被渲染的,真不幸<br />我是第一个被渲染的,真不幸<br />我是第一个被渲染的,真不幸<br />我是第一个被渲染的,真不幸<br />我是第一个被渲染的,真不幸<br />我是第一个被渲染的,真不幸<br />我是第一个被渲染的,真不幸<br />我是第一个被渲染的,真不幸<br />我是第一个被渲染的,真不幸<br />我是第一个被渲染的,真不幸<br />我是第一个被渲染的,真不幸<br />我是第一个被渲染的,真不幸<br />我是第一个被渲染的,真不幸<br />我是第一个被渲染的,真不幸<br />  
</div>
<div class="a dumfaf" style="width:400px; height:100px; margin:20px; border:2px inset #eee; overflow:auto;">
    我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!<br />
    我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!<br />我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!<br />我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!<br />我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!<br />我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!<br />我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!<br />被渲染,我就不用你的class,拿我怎么样?哈哈哈!<br />我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!<br />我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!<br />我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!<br />
</div>
<div class="a dumascroll" style="width:780px; height:350px; margin:20px; border:1px solid #369; background:#eee url(images/duma.gif) no-repeat 50%; overflow:hidden;">
    22222<br /><div class="a dumascroll b" style=" width:200px; height:150px; margin:20px; border:1px solid #093; line-height:400%; background:#fff; overflow:hidden; float:left;">
    真倒霉啊,俺还是被嵌套渲染的,555555<br />  真倒霉啊,俺还是被嵌套渲染的,555555<br />  真倒霉啊,俺还是被嵌套渲染的,555555<br />  真倒霉啊,俺还是被嵌套渲染的,555555<br />  真倒霉啊,俺还是被嵌套渲染的,555555<br />  真倒霉啊,俺还是被嵌套渲染的,555555<br />  真倒霉啊,俺还是被嵌套渲染的,555555<br />  真倒霉啊,俺还是被嵌套渲染的,555555<br />  真倒霉啊,俺还是被嵌套渲染的,555555<br />  真倒霉啊,俺还是被嵌套渲染的,555555<br />  真倒霉啊,俺还是被嵌套渲染的,555555<br />  真倒霉啊,俺还是被嵌套渲染的,555555<br />  真倒霉啊,俺还是被嵌套渲染的,555555<br />  真倒霉啊,俺还是被嵌套渲染的,555555<br />  真倒霉啊,俺还是被嵌套渲染的,555555<br />  真倒霉啊,俺还是被嵌套渲染的,555555<br />  真倒霉啊,俺还是被嵌套渲染的,555555<br />  
</div>
<div class="a" style=" width:200px; height:120px; margin:20px; border:2px inset #eee; background:#fff; overflow:auto; float:right; float:right;">
    笨哟你,嵌套就嵌套,你不用他class就不会被渲染,你看看我,羡慕吧<br />笨哟你,嵌套就嵌套,你不用他class就不会被渲染,你看看我,羡慕吧<br />笨哟你,嵌套就嵌套,你不用他class就不会被渲染,你看看我,羡慕吧<br />笨哟你,嵌套就嵌套,你不用他class就不会被渲染,你看看我,羡慕吧<br />笨哟你,嵌套就嵌套,你不用他class就不会被渲染,你看看我,羡慕吧<br />笨哟你,嵌套就嵌套,你不用他class就不会被渲染,你看看我,羡慕吧<br />笨哟你,嵌套就嵌套,你不用他class就不会被渲染,你看看我,羡慕吧<br />笨哟你,嵌套就嵌套,你不用他class就不会被渲染,你看看我,羡慕吧<br />笨哟你,嵌套就嵌套,你不用他class就不会被渲染,你看看我,羡慕吧<br />
</div><br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111
</div>
<h1>图片自定义滚动条3.0(Duma“自动渲染版”,也许世间万物都会变,但是真挚的爱,却永远留存在心中!)</h1>
<ol>
<li>支持任意形式(包括图片自定义)的美化扩展,跨浏览器支持</li>
<li>支持鼠标按住上、下箭按钮实现上下滚动</li>
<li>支持鼠标滚轮放于“滚动条区”滚动,而不仅限放于滚动内容区才滚</li>
<li>支持鼠标按住滚动条(未松开)并移出滚动区域仍然能拖拽滚动</li>
<li>滚动条子根据左边滚动内容高与可视区域高度比例等比例,且当滚动条细到一定程度时设置最小高度值,内容过少时隐藏滚动条子</li>
<li>支持鼠标在滚动条子的上下空白区间点击实现上、下定位滚动(模拟windows滚动条)</li>
<li>支持键盘上下方向键,滚动区滚完之后才轮到页面body滚</li>
<li>支持页面刷新后保留滚动条滚动位置(需浏览器支持或打开cookie)</li>
<li>鼠标放于自定义滚动区滚动滚轮,滚动区滚完之后才轮到页面body滚</li>
<li>在原来几个版本基础上代码重构,这回只需在渲染的div里追加一个名为"dumascroll" 的class即可自动渲染,而不设此class的不受影响</li>
<li>修复了以往版本所发现的bug:<a href="http://bbs.blueidea.com/thread-2936181-1-3.html" target="">以往版本</a></li>
</ol>
<h2>将来版本可继续扩展的功能有:</h2>
<ul>
<li>增加空格键的“下方向”快速滚动支持(更好地模拟windows滚动条用户体验)</li>
<li>增加页面body的渲染支持</li>
<li>增加textarea的渲染支持</li>
<li>增加嵌套div的渲染支持(目前代码嵌套时有滚动的bug,被嵌套的div的滚动高度算法到这个版本时将大幅修改)</li>
<li>增加同时出现横向滚动条的支持(当有这方面需求时可以扩展)</li>
</ul>
<p>期待大家帮忙寻找新bug并提出宝贵建议,相信下一版本将做的更好,谢谢(QQ:149561420,gTalk:dumachuixuf@gmail.com)。</p>
</body>
</html>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics