脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 原生js滚动条

原生js封装自定义滚动条

 更新时间：2017年03月24日 11:54:35   作者：兔子只吃胡萝卜  
本文主要介绍了原生js封装自定义滚动条的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧

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

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

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • layui关闭层级、简单监听的实例

    layui关闭层级、简单监听的实例

    今天小编就为大家分享一篇layui关闭层级、简单监听的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序实现默认第一个选中变色效果

    微信小程序实现默认第一个选中变色效果

    这篇文章主要介绍了微信小程序实现默认第一个选中变色效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • JavaScript实现页面跳转的5种方法总结

    JavaScript实现页面跳转的5种方法总结

    在前台开发中会涉及页面跳转的问题,下面这篇文章主要给大家总结介绍了关于JavaScript实现页面跳转的5种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • 详解Webpack4多页应用打包方案

    详解Webpack4多页应用打包方案

    这篇文章主要介绍了详解Webpack4多页应用打包方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • ionic中列表项增加和删除的实现方法

    ionic中列表项增加和删除的实现方法

    在项目中遇到表单似的页面，需要进行增加一行和减少一行的操作，基于ionic怎么实现呢？下面小编给大家分享ionic中列表项增加和删除的实现方法，一起看看吧
    2017-01-01
  • ant design中实现table的表格行的拖拽

    ant design中实现table的表格行的拖拽

    这篇文章主要介绍了ant design中实现table的表格行的拖拽，文章围绕table表格行拖拽实现的相关资料展开详细的代码内容，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-03-03
  • HTML5 JS压缩图片并获取图片BASE64编码上传

    HTML5 JS压缩图片并获取图片BASE64编码上传

    这篇文章主要介绍了HTML5 JS压缩图片并获取图片BASE64编码上传方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • Javascript网页抢红包外挂实现分享

    Javascript网页抢红包外挂实现分享

    本篇文章通过一个抢红包的网页实例讲述了Javascript书写的原理以及思路，有兴趣的朋友参考学习下。
    2018-01-01
  • JS中定位 position 的使用实例代码

    JS中定位 position 的使用实例代码

    本文通过实例代码给大家介绍了JS中定位 position 的使用，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2017-08-08
  • JavaScript该如何学习 怎样轻松学习JavaScript

    JavaScript该如何学习 怎样轻松学习JavaScript

    JavaScript该如何学习？如何轻松学习JavaScript？这篇文章主要介绍了轻松学习JavaScript的方法
    2017-06-06

最新评论