Home > Article > Web Front-end > Code case sharing for native js encapsulation of custom scroll bars

Code case sharing for native js encapsulation of custom scroll bars

黄舟Original: 2017-03-25 14:49:421478browse

This article mainly introduces the relevant knowledge of native js encapsulating custom scroll bars. Has very good reference value. Let's take a look at it with the editor

Recently there was a project about making an online music player, which required the use of a scroll bar, but the built-in scroll bar was too ugly, so I thought about it myself. Custom scroll bars.

I read the principles online, but to be honest I didn’t understand much. I studied it while I was using Android this morning, and I’m pretty satisfied with the results. Then wrap a object.

The method of use is very simple, just customize a p, import this object as a parameter, and just click new. You can also define the style of the scroll bar yourself, just modify the style sheet yourself

Rendering:

Code case sharing for native js encapsulation of custom scroll bars

## The code is as follows:

<!doctype html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title></title> 
</head>
<style type="text/css">
p{
 padding:0px;
 box-sizing:border-box;
 margin:0px;
 border:0px;
}
#p-5{
 width: 700px;
 height: 500px;
 border:1px solid black;
 position: relative;
 overflow: hidden;
}
.ribbit-OF-p1{
 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-p2{
 position: absolute;
 top:0px;
 right: 0px;
 width: 100%;
 height: 100px;
 background-color:rgba(0,0,0,0.3);
 border-radius: 10px;
}
.ribbit-OF-p3{
 width: 100%;
 height:auto;
 background-color: lime;
}
</style>
<body>
<p id="p-1">
<p id="p-2">

</p> 
</p>
<p id="p-3"><p id="p-4"></p></p>
<p id="p-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/>
</p>
</body>
<script type="text/javascript">
var p_5 = document.getElementById(&#39;p-5&#39;);
function OverFlow(element){
 this.element = element;
 this.ribbit_OF_p1 = document.createElement("p");
 this.ribbit_OF_p2 = document.createElement("p");
 this.ribbit_OF_p3 = document.createElement("p");
 this.createp = function(){
  this.ribbit_OF_p1.className = "ribbit-OF-p1";
  this.ribbit_OF_p2.className = "ribbit-OF-p2";
  this.ribbit_OF_p3.className = "ribbit-OF-p3";
  this.ribbit_OF_p3.innerHTML = this.element.innerHTML;
  this.element.innerHTML="";
  this.element.appendChild(this.ribbit_OF_p3);
  this.ribbit_OF_p1.appendChild(this.ribbit_OF_p2);
  document.body.appendChild(this.ribbit_OF_p1);
  this.ribbit_OF_p1.style.height = getComputedStyle(this.element,null).height;
  this.ribbit_OF_p1.style.left = (this.element.offsetLeft+(parseInt(getComputedStyle(this.element,null).width)
  -parseInt(getComputedStyle(this.ribbit_OF_p1,null).width)))+"px";
  this.ribbit_OF_p1.style.top = this.element.offsetTop+"px";
  this.ribbit_OF_p2.style.top = "0px";
 }
 this.addAudo=function(){
  var YY=null;//前鼠标位置
  var topXX = 0;//前top位置
  var topX = 0;//后top值
  var vherght = parseInt(getComputedStyle(this.ribbit_OF_p3,null).height)-parseInt(getComputedStyle(this.element,null).height);//可移动
  var dst = 0;
  //最大top移动位置
  var top_x = parseInt(getComputedStyle(this.ribbit_OF_p1,null).height)-parseInt(getComputedStyle(this.ribbit_OF_p2,null).height);
  var thio = this;
  window.onmousemove = function(e){
   fun(e.clientY);
  };
  this.ribbit_OF_p2.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_p2.style.top = (topX-1)+"px";
    dst = topX*vherght/top_x;
    thio.element.scrollTop = dst;
   }
  }
 }
 this.createp();
 this.addAudo();
}
new OverFlow(p_5);
</script>
</html>

The above is the detailed content of Code case sharing for native js encapsulation of custom scroll bars. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of JS regular replacement method to remove spacesNext article：Detailed explanation of JS regular replacement method to remove spaces

See more

Code case sharing for native js encapsulation of custom scroll bars

Related articles