原生js封装自定义滚动条


Posted in Javascript onMarch 24, 2017

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

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

使用方法很简单,就是自定义一个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>

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

Javascript 相关文章推荐
JavaScript定义类的几种方式总结
Jan 06 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
小程序云开发之用户注册登录
May 18 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 #Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 #jQuery
JS得到当前时间的方法示例
Mar 24 #Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 #jQuery
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 #jQuery
原生js实现简单的Ripple按钮实例代码
Mar 24 #Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 #jQuery
You might like
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
PHP面向对象详解(三)
2015/12/07 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python单元测试框架unittest简明使用实例
2015/04/13 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
30年同学聚会感言
2014/01/30 职场文书
小学教师师德感言
2014/02/10 职场文书
应急管理培训方案
2014/06/12 职场文书
团组织推优材料
2014/12/29 职场文书
医院志愿者活动总结
2015/05/06 职场文书
英语导游欢迎词
2015/09/30 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫