Vous devez comprendre trois éléments DOM, à savoir: ClientHeight, Offsetheight, ScrollTop.
ClientHeight: La hauteur de cet élément occupe la hauteur de l'espace entier. Par conséquent, si une div a une barre de défilement, cette hauteur n'inclut pas le contenu de la partie suivante que la barre de défilement ne s'affiche pas. Et c'est juste la hauteur de Div.
Offsetheight: fait référence à la hauteur du contenu de l'élément. Selon 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? Il peut être compris comme la longueur de la barre de défilement qui peut être défilée.
Par exemple, si une hauteur div est de 400px (c'est-à-dire que le client est 400) et que le contenu à l'intérieur est une très longue liste, et la hauteur du contenu est de 1000px (c'est-à-dire que la valeur de la viande est de 1000). Ainsi, dans la partie visible, nous voyons que le contenu 400px et 1000px est toujours invisible de 600px. Et cette partie invisible est ce que nous pouvons afficher en tirant la barre de défilement. Si la barre de défilement ne tire pas, le Scrolltop est 0 pour le moment. Si vous tirez la barre de défilement en bas, la partie inférieure de la liste sera affichée. À l'heure actuelle, le Scrolltop est 600. Par conséquent, l'intervalle de valeur de ScrollTop est [0, 600]. Ainsi, ce 600 peut être compris comme la longueur de la barre de défilement qui peut être défilée.
Après avoir compris le concept ci-dessus. Il est facile de dire s'il fait défiler vers le bas.
Tout d'abord, nous tirons la barre de défilement, tirons du haut en bas, et la modification est la valeur de Scrolltop, et cette valeur a un intervalle.
Cet intervalle est: [0, (offsetheight - ClientHeight)]]
C'est-à-dire que l'ensemble du processus de rédaction de barre de défilement change dans la plage de 0 à (Offsetheight ClientHeight).
1. Jugement La barre de défilement défile en bas: ScrollTop == (Offsetheight ClientHeight)
2. À moins de 50 pi
3. À 5% de la distance de la barre de défilement par rapport au bas: ScrollTop / (Offsetheight ClientHeight)> = 0,95
Comme ci-dessus.
Si vous souhaitez tirer vers le bas, chargez automatiquement du contenu. Enregistrez simplement un événement de barre de défilement:
La copie de code est la suivante:
scrollBottomTest = function () {
$ ("# contenant"). Scroll (function () {
var $ this = $ (this),
ViewH = $ (this) .height (), // hauteur visible
Contenth = $ (this) .get (0) .scrollHeight, // Hauteur de contenu
ScrollTop = $ (this) .scrolltop (); // Hauteur de défilement
// if (Contenth - ViewH - ScrollTop <= 100) {// Lorsque vous atteignez le 100px inférieur, chargez un nouveau contenu
if (ScrollTop / (Contenth -Viewh)> = 0,95) {// Lorsque vous atteignez le 100px inférieur, chargez un nouveau contenu
// Chargez les données ici.
}
});
}
PS: Ici, je recommande un outil de requête en ligne sur les événements JS, qui résume les types d'événements couramment utilisés et les fonctions de fonction de JS:
Une liste complète des événements et fonctions JavaScript:
http://tools.vevb.com/table/javascript_event