原生js封装自定义滚动条

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

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

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

效果图：

代码如下：

 
 
 
  
  


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

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