原生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 09 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
如何使JavaScript休眠或等待
Apr 27 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
php cli 方式 在crotab中运行解决
2010/02/08 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
pymongo中group by的操作方法教程
2019/03/22 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
前台文员个人求职信范文
2014/01/05 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
小学生环保倡议书
2014/05/15 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
合伙经营协议书范本
2014/09/13 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
python中的装饰器该如何使用
2021/06/18 Python
Python中可变和不可变对象的深入讲解
2021/08/02 Python
Python如何将list中的string转换为int
2022/07/15 Ruby