欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生js封装自定义滚动条

程序员文章站 2023-11-23 20:20:04
最近有一个关于制作在线音乐播放器的项目,需要使用一个滚动条,但是自带滚动条实在是太丑了,所以就自己琢磨了一下自定义的滚动条。 在网上看原理,说实话没怎么看懂,就趁今天上午...

最近有一个关于制作在线音乐播放器的项目,需要使用一个滚动条,但是自带滚动条实在是太丑了,所以就自己琢磨了一下自定义的滚动条。

在网上看原理,说实话没怎么看懂,就趁今天上午上安卓的时候,研究了一下,结果还算是满意吧。然后就包装一个对象。

使用方法很简单,就是自定义一个div,将这个对象导入做参数,new一下就可以。也可以自己定义滚动条的样式,只要自己修改一下样式表就可以

效果图:

原生js封装自定义滚动条

代码如下:

<!doctype html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title></title> 
</head>
<style type="text/css">
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;
}
</style>
<body>
<div id="div-1">
<div id="div-2">

</div> 
</div>
<div id="div-3"><div id="div-4"></div></div>
<div id="div-5">
  123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
</div>
</body>
<script type="text/javascript">
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);
</script>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!