189 8069 5689

原生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如何封装自定义滚动条
URL分享:http://cdxtjz.com/article/jgogid.html