原生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 相关文章推荐
文字幻灯片
Jun 26 Javascript
jQuery 处理网页内容的实现代码
Feb 15 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
基于JavaScript 实现拖放功能
Sep 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
php number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
理解Javascript_13_执行模型详解
2010/10/20 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
python获取从命令行输入数字的方法
2015/04/29 Python
python机器学习之神经网络(三)
2017/12/20 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
一封普通求职者的求职信
2013/11/20 职场文书
劳动实践课感言
2014/02/01 职场文书
毕业自我评价
2014/02/05 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
总经理检讨书范文
2015/02/16 职场文书
vue里使用create, mounted调用方法
2022/04/26 Vue.js