原生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 相关文章推荐
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
JsDom 编程小结
Aug 09 Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
VeeValidate在vue项目里表单校验应用案例
May 09 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
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操作mysqli(示例代码)
2013/10/28 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
php与js的区别是什么
2013/08/05 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
详解javascript数组去重问题
2015/11/06 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
python 命名规范知识点汇总
2020/02/14 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
青年文明号复核材料
2014/02/11 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
激励员工的口号
2014/06/16 职场文书
2014年教师工作总结
2014/11/10 职场文书
自我推荐信怎么写
2015/03/24 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
会议主持人开场白台词
2015/05/28 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
redis 解决库存并发问题实现数量控制
2022/04/08 Redis