Comment vérifier si un utilisateur a fait défiler vers le bas

Question

J’ai fais un système de pagination (un peu comme Facebook) où la teneur en charge lorsque l’utilisateur effectue un défilement vers le bas. J’imagine que la meilleure façon de faire qui consiste à trouver lorsque l’utilisateur se trouve au bas de la page et exécutez une requête ajax pour charger plus de messages.

Le seul problème est que je ne sais pas comment faire pour vérifier si l’utilisateur a fait défiler vers le bas de la page avec jQuery. Toutes les idées ?

TL ; dr, que j’ai besoin de trouver un moyen de vérifier lorsque l’utilisateur a fait défiler vers le bas de la page avec jQuery. :)

Answer 1

Utiliser l' .scroll() événement sur window, comme ceci:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

Vous pouvez le tester ici, cela prend du haut de défilement de la fenêtre, donc combien il défile vers le bas, ajoute la hauteur de la fenêtre visible et vérifie si c'est égal à la hauteur de l'ensemble (document). Si vous voulais au lieu de vérifier si l'utilisateur est à proximité de la bas, ça ressemble à quelque chose comme ceci:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

Vous pouvez tester cette version qui est ici, il suffit de régler qu' 100 quelque soit le pixel à partir de la base, vous voulez déclencher.

Answer 2

Réponse de Nick Craver fonctionne très bien, la question de rechange que la valeur de `` varie selon le navigateur.

Pour le faire fonctionner sur tous les navigateurs, utilisez cette fonction de James Padolsey:

au lieu de `` , de sorte que le code final est :

Answer 3

Pour ceux qui utilisent de Nick solution et répètent alertes / déclenchement des événements, vous pouvez ajouter une ligne de code ci-dessus l’exemple d’alerte :

Cela signifie que le code ne se déclenche la première fois que vous êtes au sein de 100px du bas du document. Il ne sera pas répéter si vous faites défiler vers le haut et puis de nouveau vers le bas, qui peuvent ou non être utiles en fonction de ce que vous utilisez le code de Nick.

Answer 4

Suite à l’excellente réponse acceptée de Nick Craver, vous pouvez throttle l’événement scroll pour qu’il n’est pas déclenché si fréquemment ainsi d’augmenter les performances du navigateur:

Answer 5

Nick Craver la réponse doit être légèrement modifié pour qu'il fonctionne sur iOS 6 Safari Mobile et doit être:

$(window).scroll(function() {
   if($(window).scrollTop() + window.innerHeight == $(document).height()) {
       alert("bottom!");
   }
});

Changement de $(window).hauteur() de la fenêtre.innerHeight doit être fait, parce que quand la barre d'adresse est cachée supplémentaires 60px sont ajoutés à la fenêtre de la hauteur, mais en utilisant $(window).hauteur() ne pas tenir compte de ce changement, tout en utilisant la fenêtre.innerHeight.

Remarque: La fenêtre.innerHeight propriété comprend également la barre de défilement horizontale de la hauteur (si elle est rendue), à la différence de $(window).hauteur() qui ne comprendront pas la barre de défilement horizontale de la hauteur. Ce n'est pas un problème dans le navigateur Safari Mobile, mais peut entraîner un comportement inattendu dans d'autres navigateurs ou les futures versions de Safari Mobile. La modification de "==" pour ">=" pourrait corriger cela pour la plupart des cas d'utilisation courants.

Lire plus à propos de la fenêtre.innerHeight bien ici: https://developer.mozilla.org/en-US/docs/Web/API/window.innerHeight