平武建站

如何基于JavaScript实现自定义滚动条

这篇文章主要介绍如何基于JavaScript实现自定义滚动条，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联公司专注于永川企业网站建设,成都响应式网站建设公司,商城网站建设。永川网站建设公司,为永川等地区提供建站服务。全流程定制网站开发，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务

可直接使用的js滚动条，先看看效果图：

如何基于JavaScript实现自定义滚动条

代码如下




 
 自定义滚动条


滚动条

*{ margin:0; padding:0;}
#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(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1485320653275&di=b7bc29cc2c7b3388d44958d8f97db0a3&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20151212%2Fmp48094209_1449905365456_7.jpg) 
}
.scrollDiv{
 width:18px; 
 position:absolute; 
 top:0; 
 background:#666;
 border-radius:10px;
}




 
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');

以上是“如何基于JavaScript实现自定义滚动条”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


名称栏目：如何基于JavaScript实现自定义滚动条
文章地址：http://pwwzsj.com/article/piecdo.html

其他资讯