Maison > Article > interface Web > jQuery détermine si la barre de défilement a défilé jusqu'au bas du script de page

jQuery détermine si la barre de défilement a défilé jusqu'au bas du script de page

巴扎黑original: 2017-06-29 09:41:331408parcourir

En fait, c'est très simple. Il suffit d'utiliser les trois paramètres clientHeight, offsetHeight et scrollTop pour déterminer notre position actuelle.

Exemple, jugez vers le bas

Le code est le suivant

$(window).scroll(function () {
    if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
        alert("哦哦,到底了.");
    }
});

Si vous souhaitez tirer vers le baschargez automatiquement le contenu . Enregistrez simplement un événement de barre de défilement :

Tout d'abord, nous tirons la barre de défilement de haut en bas. Ce qui change, c'est la valeur de scrollTop, et cette valeur a une plage.
Cet intervalle est : [0, (offsetHeight - clientHeight)]
C'est-à-dire que le changement dans l'ensemble du processus d'extraction de la barre de défilement est compris entre 0 et (offsetHeight - clientHeight).

1. Déterminez si la barre de défilement a défilé vers le bas : scrollTop == (offsetHeight – clientHeight)
2 Lorsque la barre de défilement est à moins de 50 px du bas : (offsetHeight – clientHeight) – scrollTop. e5ba70a03f994292cd6dff43e7dfdf16= 0,95

Le code est le suivant

scrollBottomTest =function(){
     $("#contain").scroll(function(){
         var $this =$(this),
         viewH =$(this).height(),//可见高度
         contentH =$(this).get(0).scrollHeight,//内容高度
         scrollTop =$(this).scrollTop();//滚动高度
        //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容
        if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容
        // 这里加载数据..
        }
     });
}

jugement js

Déterminez si la barre de défilement verticale a atteint le bas
Une fois les concepts ci-dessus clarifiés, le codage est en fait relativement simple. Voici l'exemple de code :

Le. le code est le suivant

<!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"></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 pour atteindre le bas. Voir l'instruction nScrollTop + nDivHight >= nScrollHight.
Dans le programme, la détection et l'exécution de l'instruction de jugement if dans l'événement scroll du div externe consomme 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 juge 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 le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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：Le moyen idéal pour obtenir un effet de défilement de page (Scroll) avec jQueryArticle suivant：Le moyen idéal pour obtenir un effet de défilement de page (Scroll) avec jQuery

Articles Liés

Voir plus