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

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

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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