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
1 2 3 4 5 |
|
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. <= 50
3. À moins de 5 % du bas de la barre de défilement : scrollTop / (offsetHeight – clientHeight) >= 0,95
Le code est le suivant
1 2 3 4 5 6 7 8 9 10 11 12 |
|
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
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!