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如何封装自定义滚动条
本文链接:http://cdxtjz.cn/article/jgogid.html

联系我们

您好HELLO!
感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
  • 电话:028- 86922220 18980695689
  • 商务合作邮箱:631063699@qq.com
  • 合作QQ: 532337155
  • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

小谭建站工作室

成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

小谭观点

相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。