原生js包自定义滚动条

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

在网上看原理，说实话，我不是很懂，所以就利用了今天早上的安卓，研究了一下，结果还是比较满意的。然后包装一个对象。

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

渲染：

代码如下：

！doctype html html head meta charset=' utf-8 ' title/title/head style type=' text/CSS ' div { padd :0 px；盒子大小：边框盒子；margin :0 pxborder :0 px } # div-5 { width : 700 px；高度： 500像素；border:1px纯黑；相对位置：飞越：隐藏；}.ribbit-OF-div 1 {宽度： 20px背景-color: rgb(239，238，238)；border:1px固体rgba(0，0，0，0.5)；绝对位置：right :0 pxtop : 0pxcursor : default }。ribbit-OF-div2{位置：绝对值；top:0pxright: 0px宽度： 100%;高度： 100像素；背景-color:rgba(0，0，0，0.3)；边框半径： 10px}.ribbit-OF-div3{宽度： 100%;高度：自动背景色：石灰；}/stylebodydiv id=' div-1 ' div id=' div-2 '/div/div id=' div-3 ' div id=' div-4 '/div/div id=' div-5 ' 123123 br/qwebr/12 ASD 23 br/ASD 3123 br/qwe 123 br/235423423 br/azxc 123 br/123123 br/qwebr/12 ASD 23 br/23元素=元素；这个。ribbit _ OF _ div 1=文档。创建元素(' div ')；这个。ribbit _ OF _ div 2=文档。创建元素(' div ')；这个。ribbit _ OF _ div 3=文档。创建元素(' div ')；这个。create div=function(){ this。ribbit _ OF _ div 1。类名=' ribbit-OF-div-1 '；这个。ribbit _ OF _ div 2。类名=' ribbit-OF-div-2 '；这个。ribbit _ OF _ div 3。类名=' ribbit-OF-div-3 '；这个。ribbit _ OF _ div 3。innerhtml=this。元素。innerhtml这个。元素。innerHTMl=这个。元素。appendchild(这个。ribbit _ OF _ div 3)；这个。ribbit _ OF _ div 1。appendchild(这个。ribbit _ OF _ div 2)；文件。尸体。appendchild(这个。ribbit _ OF _ div 1)；这个。ribbit _ OF _ div 1。风格。height=getcomputed style(这。元素，null ).身高；这个。ribbit _ OF _ div 1。风格。左=(这个。元素。offsetleft(Parsent)(GetComputed style(this。元素，null)).width)-parsent(GetComputedStyle)(这个。ribbit _ OF _ div 1，空).宽度)))“px”；这个。ribbit _ OF _ div 1。风格。top=这个。元素。offset top“px”；这个。ribbit _ OF _ div 2。风格。top=' 0px}这个。addaudo=function(){ var YY=null；//前鼠标位置var topXX=0；//前顶端位置var ToPx=0；//后顶端值var vher ght=ParSeint(GetComputed style(this。ribbit _ OF _ div 3，空).height)-parsent(GetComputedStyle)(这个。元素，null ).高度);//可移动var dst=0；//最大顶端移动位置var top _ x=parsent(GetComputed style(this。ribbit _ OF _ div 1，空).height)-parsent(GetComputedStyle)(这个。ribbit _ OF _ div 2，空).高度);var thio=thiswindow。onmousemove=function(e){ fun(e . clienty)；};这个。ribbit _ OF _ div 2。onmousedown=function(e){ YY=e . clienty；topXX=ParSeint(这个。风格。顶部)；返回false}窗口。onmouseup=function(){ YY=null；返回真；}函数fun(y){ if(top_x=topXtopX=0YY！=null){ ToPx=y-YY ToPxx；if(ToPx 0)ToPx=0；if(TopxtOp _ x)TopX=top _ x-1；硫代。ribbit _ OF _ div 2。风格。top=(Topx-1)‘px’；dst=ToPx * vher ght/top _ x；硫代。元素。滚动顶部=dst} } }这个。create DiV()；这个。addau do()；}新的Overflow(div _ 5)；/script/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！