Maison >interface Web >js tutoriel >Une méthode écrite en jquery pour déterminer si la barre de défilement d'un div a atteint le bas [recommandé]_jquery

Une méthode écrite en jquery pour déterminer si la barre de défilement d'un div a atteint le bas [recommandé]_jquery

PHP中文网original: 2016-05-16 15:03:041790parcourir

Il existe de nombreux concepts liés aux barres de défilement dans jQuery, mais il existe trois propriétés liées au déplacement des barres de défilement, à savoir : scrollTop, scrollLeft et scrollHeight. Parmi eux, il n'y a presque aucun conseil d'application pour la propriété scrollHeight trouvé sur Internet, et j'ai juste besoin de l'utiliser.

Nous discutons désormais uniquement des propriétés scrollTop et scrollHeight liées au défilement vertical.

1. Bonne compréhension des propriétés pertinentes de la barre de défilement :

Supposons qu'il existe le code Html suivant :

<div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
  <div style="height:750px;">
  </div>
</div>

Étant donné que la hauteur de la balise p intérieure est plus longue que celle extérieure et que le p extérieur permet à la barre de défilement verticale d'apparaître automatiquement, vous pouvez voir la barre de défilement verticale après l'avoir ouverte avec un navigateur. Faites glisser la barre de défilement vers le bas d'une certaine distance et l'effet de page que vous voyez est le suivant (a et b à droite sont marqués par PS après avoir capturé la photo) :

Une méthode écrite en jquery pour déterminer si la barre de défilement dun div a atteint le bas [recommandé]_jquery

Alors, quelles sont les propriétés scrollTop et scrollHeight du p externe ici ?

Certaines personnes disent que scrollTop est égal au a marqué sur l'image. scrollHeight est égal à la hauteur du p externe, 500px. En fait, aucun d’eux n’a raison.

En fait, a et b marqués sur l'image n'ont aucune signification spécifique pour nous permettre de programmer et d'écrire du code js. Ils n'ont qu'une signification symbolique.

En fait, dans le code js, la barre de défilement est abstraite sous forme de "point". scrollHeight n'est en fait pas la "hauteur de la barre de défilement" (b), mais représente la hauteur dont la barre de défilement a besoin pour défiler, c'est-à-dire que la hauteur du p interne est de 750 px. Et scrollTop indique combien occupe la position actuelle de la barre de défilement (un point) en 750px, pas le a marqué dans l'image.

À cette époque, nous avons été très impressionnés par les concepteurs de Windows. Le design de la barre de défilement était si beau qu'il a trompé de nombreux opérateurs de souris simples d'esprit. Les distances entre a et b identifient respectivement la distance sur laquelle la barre de défilement a défilé et la distance qui doit défiler. Il existe une relation correspondante entre elles, mais celles-ci ne sont pas prises en compte par les programmeurs comme nous qui développons des applications. concevoir l'interface graphique GUI du système d'exploitation considéré.

2 Déterminez si la barre de défilement verticale a atteint le bas

Après avoir clarifié les concepts ci-dessus, le codage est en fait relativement simple. est un exemple de code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8">
   <title>下拉滚动条滚到底部了吗？</title>
   <script language="JavaScript" src="jQuery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js"></script>
   <script language="javascript">
   $(document).ready(function (){
    var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
    var nScrollTop = 0;  //滚动到的当前位置
    var nDivHight = $("#div1").height();
 
    $("#div1").scroll(function(){
     nScrollHight = $(this)[0].scrollHeight;
     nScrollTop = $(this)[0].scrollTop;
     if(nScrollTop + nDivHight >= nScrollHight)
      alert("滚动条到底部了");
     });
   });
   </script>
  <body>
  <div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
   <div style="background-color:#ccc; height:750px;">IE 和 FF 下测试通过</div>
  </div>
  </body>
  </html>

Explication du code :

La hauteur du div intérieur est de 750 et la hauteur du div extérieur est de 500, donc la barre de défilement verticale doit faire défiler une distance de 750 à 500 = 250, elle atteindra le bas, voir l'instruction nScrollTop + nDivHight >= nScrollHight.

Dans le programme, la détection et l'exécution des instructions de jugement if dans l'événement scroll du div externe consomment beaucoup de ressources CPU. Utilisez la souris pour faire glisser la barre de défilement, et cet événement sera déclenché tant qu'il y aura un changement d'un pixel. Mais en cliquant sur les flèches aux deux extrémités de la barre de défilement, l'événement sera déclenché beaucoup moins fréquemment. Par conséquent, l’événement scroll de la barre de défilement doit être utilisé avec prudence.

Cet exemple évalue la situation lorsqu'il n'y a pas de barre de défilement horizontale. Lorsqu'il y a une barre de défilement horizontale, la situation changera légèrement, donc dans l'instruction nScrollTop + nDivHight >= nScrollHight, vous devez utiliser " >=" Opérateur de comparaison, et lorsqu'il n'y a pas de barre de défilement horizontale, le signe égal "=" est suffisant. Vous pouvez réellement le tester. Vous pouvez également déterminer si la barre de défilement horizontale a défilé jusqu'à la fin.

Ce qui précède est une méthode écrite en jquery pour déterminer si la barre de défilement div atteint le bas du contenu [Recommandé]_jquery Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php. .cn) !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée du currying de la fonction JavaScriptArticle suivant：Explication détaillée du currying de la fonction JavaScript

Articles Liés

Voir plus