本文主要介绍了原生js封装自定义滚动条的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
最近有一个关于制作在线音乐播放器的项目，需要使用一个滚动条，但是自带滚动条实在是太丑了，所以就自己琢磨了一下自定义的滚动条。
在网上看原理，说实话没怎么看懂，就趁今天上午上安卓的时候，研究了一下，结果还算是满意吧。然后就包装一个对象。
使用方法很简单，就是自定义一个p，将这个对象导入做参数，new一下就可以。也可以自己定义滚动条的样式，只要自己修改一下样式表就可以
效果图：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
p{
padding:0px;
box-sizing:border-box;
margin:0px;
border:0px;
}
#p-5{
width: 700px;
height: 500px;
border:1px solid black;
position: relative;
overflow: hidden;
}
.ribbit-of-p1{
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-p2{
position: absolute;
top:0px;
right: 0px;
width: 100%;
height: 100px;
background-color:rgba(0,0,0,0.3);
border-radius: 10px;
}
.ribbit-of-p3{
width: 100%;
height:auto;
background-color: lime;
}
</style>
<body>
<p id="p-1">
<p id="p-2">
</p>
</p>
<p id="p-3"><p id="p-4"></p></p>
<p id="p-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/>
</p>
</body>
<script type="text/javascript">
var p_5 = document.getelementbyid('p-5');
function overflow(element){
this.element = element;
this.ribbit_of_p1 = document.createelement("p");
this.ribbit_of_p2 = document.createelement("p");
this.ribbit_of_p3 = document.createelement("p");
this.createp = function(){
this.ribbit_of_p1.classname = "ribbit-of-p1";
this.ribbit_of_p2.classname = "ribbit-of-p2";
this.ribbit_of_p3.classname = "ribbit-of-p3";
this.ribbit_of_p3.innerhtml = this.element.innerhtml;
this.element.innerhtml="";
this.element.appendchild(this.ribbit_of_p3);
this.ribbit_of_p1.appendchild(this.ribbit_of_p2);
document.body.appendchild(this.ribbit_of_p1);
this.ribbit_of_p1.style.height = getcomputedstyle(this.element,null).height;
this.ribbit_of_p1.style.left = (this.element.offsetleft+(parseint(getcomputedstyle(this.element,null).width)
-parseint(getcomputedstyle(this.ribbit_of_p1,null).width)))+"px";
this.ribbit_of_p1.style.top = this.element.offsettop+"px";
this.ribbit_of_p2.style.top = "0px";
}
this.addaudo=function(){
var yy=null;//前鼠标位置
var topxx = 0;//前top位置
var topx = 0;//后top值
var vherght = parseint(getcomputedstyle(this.ribbit_of_p3,null).height)-parseint(getcomputedstyle(this.element,null).height);//可移动
var dst = 0;
//最大top移动位置
var top_x = parseint(getcomputedstyle(this.ribbit_of_p1,null).height)-parseint(getcomputedstyle(this.ribbit_of_p2,null).height);
var thio = this;
window.onmousemove = function(e){
fun(e.clienty);
};
this.ribbit_of_p2.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_p2.style.top = (topx-1)+"px";
dst = topx*vherght/top_x;
thio.element.scrolltop = dst;
}
}
}
this.createp();
this.addaudo();
}
new overflow(p_5);
</script>
</html>
以上就是原生js封装自定义滚动条的代码案例分享的详细内容。