原生js封装自定义滚动条
网络编程 2021-07-04 18:31www.168986.cn编程入门
本文主要介绍了原生js封装自定义滚动条的相关知识。具有很好的参考价值。狼蚁网站SEO优化跟着长沙网络推广一起来看下吧
最近有一个关于制作在线音乐播放器的项目,需要使用一个滚动条,但是自带滚动条实在是太丑了,所以就自己琢磨了一下自定义的滚动条。
在网上看原理,说实话没怎么看懂,就趁今天上午上安卓的时候,研究了一下,结果还算是满意吧。然后就包装一个对象。
使用方法很简单,就是自定义一个div,将这个对象导入做参数,new一下就可以。也可以自己定义滚动条的样式,只要自己修改一下样式表就可以
效果图:
代码如下:
<!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; : 0px; cursor:default; } .ribbit-OF-div2{ position: absolute; :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. = this.element.offsetTop+"px"; this.ribbit_OF_div2.style. = "0px"; } this.addAudo=function(){ var YY=null;//前鼠标位置 var XX = 0;//前位置 var X = 0;//后值 var vherght = parseInt(getComputedStyle(this.ribbit_OF_div3,null).height)-parseInt(getComputedStyle(this.element,null).height);//可移动 var dst = 0; //最大移动位置 var _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; XX =parseInt(this.style.); return false; } window.onmouseup=function(){ YY = null; return true; } function fun(y){ if(_x>=X&&X>=0&&YY!=null){ X = y-YY+XX; if(X<0)X=0; if(X>_x)X=_x-1; thio.ribbit_OF_div2.style. = (X-1)+"px"; dst = X*vherght/_x; thio.element.scrollTop = dst; } } } this.createDiv(); this.addAudo(); } new OverFlow(div_5); </script> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持狼蚁SEO!
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程