Partage de cas de code pour l'encapsulation native js des barres de défilement personnalisées-js tutoriel-php.cn

Partage de cas de code pour l'encapsulation native js des barres de défilement personnalisées

黄舟

Libérer： 2017-03-25 14:49:42

original

1531 Les gens l'ont consulté

Cet article présente principalement les connaissances pertinentes des js natifs encapsulant des barres de défilement personnalisées. A une très bonne valeur de référence. Jetons un coup d'oeil avec l'éditeur ci-dessous

Récemment, il y a eu un projet sur la création d'un lecteur de musique en ligne, qui nécessitait l'utilisation d'une barre de défilement, mais la barre de défilement intégrée était trop moche, alors j'ai j'y ai pensé moi-même.

J'ai lu le principe en ligne, mais pour être honnête, je ne l'ai pas très bien compris, donc je l'ai étudié sous Android ce matin, et je suis plutôt satisfait du résultat. Enveloppez ensuite un objet .

La méthode d'utilisation est très simple, il suffit de personnaliser un p, d'importer cet objet en paramètre, et de cliquer simplement sur nouveau. Vous pouvez également définir vous-même le style de la barre de défilement, il suffit de modifier vous-même la feuille de style

Rendu :

Partage de cas de code pour l'encapsulation native js des barres de défilement personnalisées

Le code est le suivant :

<!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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!