资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

原生js如何封装自定义滚动条

这篇文章主要介绍了原生js如何封装自定义滚动条,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

10年积累的网站建设、网站制作经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站制作后付款的网站建设流程,更有揭阳免费网站建设让你可以放心的选择与我们合作。

效果图:

原生js如何封装自定义滚动条

代码如下:

 
 
 
  
  


div{
 padding:0px;
 box-sizing:border-box;
 margin:0px;
 border:0px;
}
#div-5{
 width: 700px;
 height: 500px;
 border:1px solid black;
 position: relative;
 overflow: hidden;
}
.ribbit-OF-div1{
 width: 20px;
 background-color: rgb(239, 238, 238);
 border:1px solid rgba(0,0,0,0.5);
 position: absolute;
 right:0px;
 top: 0px;
 cursor:default;
}
.ribbit-OF-div2{
 position: absolute;
 top:0px;
 right: 0px;
 width: 100%;
 height: 100px;
 background-color:rgba(0,0,0,0.3);
 border-radius: 10px;
}
.ribbit-OF-div3{
 width: 100%;
 height:auto;
 background-color: lime;
}





 
  123123
qwe
12asd23
asd3123
qwe123
235423423
azxc123
123123
qwe
12asd23
asd3123
qwe123
235423423
azxc123
123123
qwe
12asd23
asd3123
qwe123
235423423
azxc123
123123
qwe
12asd23
asd3123
qwe123
235423423
azxc123
123123
qwe
12asd23
asd3123
qwe123
235423423
azxc123
123123
qwe
12asd23
asd3123
qwe123
235423423
azxc123
123123
qwe
12asd23
asd3123
qwe123
235423423
azxc123
123123
qwe
12asd23
asd3123
qwe123
235423423
azxc123
123123
qwe
12asd23
asd3123
qwe123
235423423
azxc123
var div_5 = document.getElementById('div-5'); function OverFlow(element){  this.element = element;  this.ribbit_OF_div1 = document.createElement("div");  this.ribbit_OF_div2 = document.createElement("div");  this.ribbit_OF_div3 = document.createElement("div");  this.createDiv = function(){   this.ribbit_OF_div1.className = "ribbit-OF-div1";   this.ribbit_OF_div2.className = "ribbit-OF-div2";   this.ribbit_OF_div3.className = "ribbit-OF-div3";   this.ribbit_OF_div3.innerHTML = this.element.innerHTML;   this.element.innerHTML="";   this.element.appendChild(this.ribbit_OF_div3);   this.ribbit_OF_div1.appendChild(this.ribbit_OF_div2);   document.body.appendChild(this.ribbit_OF_div1);   this.ribbit_OF_div1.style.height = getComputedStyle(this.element,null).height;   this.ribbit_OF_div1.style.left = (this.element.offsetLeft+(parseInt(getComputedStyle(this.element,null).width)-parseInt(getComputedStyle(this.ribbit_OF_div1,null).width)))+"px";   this.ribbit_OF_div1.style.top = this.element.offsetTop+"px";   this.ribbit_OF_div2.style.top = "0px";  }  this.addAudo=function(){   var YY=null;//前鼠标位置   var topXX = 0;//前top位置   var topX = 0;//后top值   var vherght = parseInt(getComputedStyle(this.ribbit_OF_div3,null).height)-parseInt(getComputedStyle(this.element,null).height);//可移动   var dst = 0;   //最大top移动位置   var top_x = parseInt(getComputedStyle(this.ribbit_OF_div1,null).height)-parseInt(getComputedStyle(this.ribbit_OF_div2,null).height);   var thio = this;   window.onmousemove = function(e){    fun(e.clientY);   };   this.ribbit_OF_div2.onmousedown=function(e){    YY = e.clientY;    topXX =parseInt(this.style.top);    return false;   }   window.onmouseup=function(){    YY = null;    return true;   }   function fun(y){    if(top_x>=topX&&topX>=0&&YY!=null){     topX = y-YY+topXX;     if(topX<0)topX=0;     if(topX>top_x)topX=top_x-1;     thio.ribbit_OF_div2.style.top = (topX-1)+"px";     dst = topX*vherght/top_x;     thio.element.scrollTop = dst;    }   }  }  this.createDiv();  this.addAudo(); } new OverFlow(div_5);

感谢你能够认真阅读完这篇文章,希望小编分享的“原生js如何封装自定义滚动条”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


当前名称:原生js如何封装自定义滚动条
文章源于:http://cdkjz.cn/article/jgogid.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220