成都网站建设设计

将想法与焦点和您一起共享

原生js如何封装自定义滚动条-创新互联

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

目前创新互联公司已为上1000家的企业提供了网站建设、域名、网页空间、成都网站托管、企业网站设计、向阳网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

效果图:

原生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如何封装自定义滚动条”这篇文章对大家有帮助,同时也希望大家多多支持创新互联建站,关注创新互联网站建设公司行业资讯频道,更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前文章:原生js如何封装自定义滚动条-创新互联
文章位置:http://chengdu.cdxwcx.cn/article/ddcicj.html

其他资讯