如何基于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://xwwzsj.com/article/piecdo.html

其他资讯

售后响应及时

7×24小时客服热线

数据备份

更安全、更高效、更稳定

价格公道精准

项目经理精准报价不弄虚作假

合作无风险

重合同讲信誉，无效全额退款

瑞达杰昌建站工作室是一家专注从事于高品质视觉体验及互联网设计开发，宣威网站建设，宣威网站设计，宣威网页设计，宣威网站制作，品牌网站建设，营销网站建设，集团网站建设，企业网站建设，外贸网站建设，响应式网站建设，小程序开发，微信开发，企业形象设计，企业宣传视频等服务，瑞达杰昌建站位于宣威市龙岗区大运软件小镇，瑞达杰昌建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。

友情链接交换友情链接

成华区工商注册公司四川晃众门窗成都LOGO/VI设计成都app开发成都网站建设成都航空货运成都广告伞公司企业画册设计制作成都企业注销代办成都网店办理公司

Copyright © 2025 青羊区瑞达杰昌互联网信息服务工作室（个体工商户）宣威建站 All Rights Reserved 蜀ICP备2025133229号-6

Copyright © 2025 青羊区瑞达杰昌互联网信息服务工作室（个体工商户）宣威建站

蜀ICP备2025133229号-6