JS实现的页面自定义滚动条效果

2019-11-20 11:24:10

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现的页面自定义滚动条效果。分享给大家供大家参考，具体如下：

这里演示网页上用的滚动条效果，是一个自定义的滚动条代码，除了上下两个箭头以外，滚动条和一般的浏览器基本差不多，鼠标滚轮滚动，滚动条滚动。html结构很简单，mainBox是外层div，content是内容，滚动条div是js动态生成的。

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/js/2015/js-web-zdy-scroll-style-codes/

具体代码如下：

<!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;}p{ height:1000px;}#mainBox{ width:400px; height:500px; border:1px #bbb solid; position:relative; overflow:hidden; margin:50px auto;}#content{ height:2500px; position:absolute; left:0; top:0; background:url(//files.VeVB.COm/file_images/article/201510/20151026113716032.jpg) }.scrollDiv{ width:18px; position:absolute; top:0; background:#666; border-radius:10px;}</style></head><body><div id="mainBox"> <div id="content"></div></div><p></p><script type="text/javascript">var doc=document;var _wheelData=-1;var mainBox=doc.getElementById('mainBox');function bind(obj,type,handler){ var node=typeof obj=="string"?$(obj):obj; if(node.addEventListener){  node.addEventListener(type,handler,false); }else if(node.attachEvent){  node.attachEvent('on'+type,handler); }else{  node['on'+type]=handler; }}function mouseWheel(obj,handler){ var node=typeof obj=="string"?$(obj):obj;  bind(node,'mousewheel',function(event){   var data=-getWheelData(event);   handler(data);   if(document.all){    window.event.returnValue=false;   }else{    event.preventDefault();   }  });  //火狐  bind(node,'DOMMouseScroll',function(event){   var data=getWheelData(event);   handler(data);   event.preventDefault();  });  function getWheelData(event){   var e=event||window.event;   return e.wheelDelta?e.wheelDelta:e.detail*40;  }}function addScroll(){ this.init.apply(this,arguments);}addScroll.prototype={ init:function(mainBox,contentBox,className){  var mainBox=doc.getElementById(mainBox);  var contentBox=doc.getElementById(contentBox);  var scrollDiv=this._createScroll(mainBox,className);  this._resizeScorll(scrollDiv,mainBox,contentBox);  this._tragScroll(scrollDiv,mainBox,contentBox);  this._wheelChange(scrollDiv,mainBox,contentBox);  this._clickScroll(scrollDiv,mainBox,contentBox); }, //创建滚动条 _createScroll:function(mainBox,className){  var _scrollBox=doc.createElement('div')  var _scroll=doc.createElement('div');  var span=doc.createElement('span');  _scrollBox.appendChild(_scroll);  _scroll.appendChild(span);  _scroll.className=className;  mainBox.appendChild(_scrollBox);  return _scroll; }, //调整滚动条 _resizeScorll:function(element,mainBox,contentBox){  var p=element.parentNode;  var conHeight=contentBox.offsetHeight;  var _width=mainBox.clientWidth;  var _height=mainBox.clientHeight;  var _scrollWidth=element.offsetWidth;  var _left=_width-_scrollWidth;  p.style.width=_scrollWidth+"px";  p.style.height=_height+"px";  p.style.left=_left+"px";  p.style.position="absolute";  p.style.background="#ccc";  contentBox.style.width=(mainBox.offsetWidth-_scrollWidth)+"px";  var _scrollHeight=parseInt(_height*(_height/conHeight));  if(_scrollHeight>=mainBox.clientHeight){   element.parentNode.style.display="none";  }  element.style.height=_scrollHeight+"px"; }, //拖动滚动条 _tragScroll:function(element,mainBox,contentBox){  var mainHeight=mainBox.clientHeight;  element.onmousedown=function(event){   var _this=this;   var _scrollTop=element.offsetTop;   var e=event||window.event;   var top=e.clientY;   //this.onmousemove=scrollGo;   document.onmousemove=scrollGo;   document.onmouseup=function(event){    this.onmousemove=null;   }   function scrollGo(event){    var e=event||window.event;    var _top=e.clientY;    var _t=_top-top+_scrollTop;    if(_t>(mainHeight-element.offsetHeight)){     _t=mainHeight-element.offsetHeight;    }    if(_t<=0){     _t=0;    }    element.style.top=_t+"px";    contentBox.style.top=-_t*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";    _wheelData=_t;   }  }  element.onmouseover=function(){   this.style.background="#444";   }  element.onmouseout=function(){   this.style.background="#666";   } }, //鼠标滚轮滚动，滚动条滚动 _wheelChange:function(element,mainBox,contentBox){  var node=typeof mainBox=="string"?$(mainBox):mainBox;  var flag=0,rate=0,wheelFlag=0;  if(node){   mouseWheel(node,function(data){    wheelFlag+=data;    if(_wheelData>=0){     flag=_wheelData;     element.style.top=flag+"px";     wheelFlag=_wheelData*12;     _wheelData=-1;    }else{     flag=wheelFlag/12;    }    if(flag<=0){     flag=0;     wheelFlag=0;    }    if(flag>=(mainBox.offsetHeight-element.offsetHeight)){     flag=(mainBox.clientHeight-element.offsetHeight);     wheelFlag=(mainBox.clientHeight-element.offsetHeight)*12;    }    element.style.top=flag+"px";    contentBox.style.top=-flag*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";   });  } }, _clickScroll:function(element,mainBox,contentBox){  var p=element.parentNode;  p.onclick=function(event){   var e=event||window.event;   var t=e.target||e.srcElement;   var sTop=document.documentElement.scrollTop>0?document.documentElement.scrollTop:document.body.scrollTop;   var top=mainBox.offsetTop;   var _top=e.clientY+sTop-top-element.offsetHeight/2;   if(_top<=0){    _top=0;   }   if(_top>=(mainBox.clientHeight-element.offsetHeight)){    _top=mainBox.clientHeight-element.offsetHeight;   }   if(t!=element){    element.style.top=_top+"px";    contentBox.style.top=-_top*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";    _wheelData=_top;   }  } }}new addScroll('mainBox','content','scrollDiv');</script></body></html>

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：基于javascript实现漂亮的页面过渡动画效果附源码下载

下一篇：JS实现的鼠标跟随代码(卡通手型点击效果)