Méthode JS pour déterminer si la barre de défilement a défilé vers le bas de la page et exécuter les compétences event_javascript

Vous devez comprendre 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 le contenu sous la barre de défilement qui n'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 <= 50
3. À moins de 5 % du bas de la barre de défilement : scrollTop / (offsetHeight – clientHeight) >= 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 :

Copier le code Le code est le suivant :

scrollBottomTest =fonction(){
$("#contain").scroll(function(){
        var $this =$(this),
​​​​viewH =$(this).height(),//Hauteur visible
contentH =$(this).get(0).scrollHeight,//Hauteur du contenu
         scrollTop =$(this).scrollTop();//Hauteur de défilement
//if(contentH - viewH - scrollTop <= 100) { //Lorsque vous atteignez les 100 pixels inférieurs, chargez le nouveau contenu
If(scrollTop/(contentH -viewH)>=0.95){ //Lorsque vous atteignez les 100 pixels inférieurs, chargez le nouveau contenu
//Charger les données ici..
>
});
>