Une brève analyse de la façon dont jquery détermine que la barre de défilement a défilé vers le bas de la page et exécute event_jquery

Cet article présente aux programmeurs comment jquery détermine quand la barre de défilement a atteint le bas de la page et exécute l'événement. Comprenez d'abord les trois éléments dom, à savoir : clientHeight, offsetHeight et scrollTop.

Comprenez d'abord les trois éléments dom, à savoir : clientHeight, offsetHeight et scrollTop.

clientHeight : La hauteur de cet élément occupe la hauteur de tout l'espace. Par conséquent, si un div a une barre de défilement, la hauteur n'inclut pas la barre de défilement et est. pas affiché. C'est juste la hauteur du DIV.

offsetHeight : fait référence à la hauteur du contenu de l'élément. D'après ce qui précède, cette hauteur est la hauteur à l'intérieur du DIV, y compris la partie visible et la partie invisible sous la barre de défilement.

scrollTop : Qu'est-ce que c'est ? Cela peut être compris comme la longueur sur laquelle la barre de défilement peut défiler.

Par exemple, si la hauteur d'un DIV est de 400 px (c'est-à-dire que clientHeight est de 400) et que le contenu à l'intérieur est une longue liste, la hauteur du contenu est de 1 000 px (c'est-à-dire que offsetHeight est de 1 000). Ainsi, nous voyons 400 px dans la partie visible, et il y a toujours 600 px invisibles dans le contenu de 1 000 px. Quant à cette partie invisible, on peut afficher cette partie en tirant la barre de défilement. Si la barre de défilement n'est pas tirée, scrollTop est 0 à ce moment-là. Si vous tirez la barre de défilement vers le bas et que la partie inférieure de la liste est affichée, scrollTop est 600. La plage de valeurs de scrollTop est donc [0, 600]. Ce 600 peut donc être compris comme la longueur sur laquelle la barre de défilement peut défiler.

Après avoir compris le concept ci-dessus. Il est facile de déterminer s'il faut faire défiler vers le bas.

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)]
Autrement dit, 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. À moins de 50 px du bas de la barre de défilement : (offsetHeight – clientHeight) – scrollTop 7e51cfc7b902f42e286de473a78089a5= 0,95

Idem que ci-dessus.
Si vous souhaitez tirer vers le bas pour charger automatiquement le contenu. Enregistrez simplement un événement avec barre de défilement :

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时,加载新内容
    // 这里加载数据..
    }
   });
}

L'article ci-dessus analyse brièvement comment jquery détermine quand la barre de défilement a défilé vers le bas de la page et exécute l'événement. C'est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère. vous supporterez davantage Script Home.