Question Vérifiez si un utilisateur a fait défiler vers le bas


Je fais un système de pagination (sorte de Facebook) où le contenu se charge lorsque l'utilisateur fait défiler vers le bas. J'imagine que la meilleure façon de le faire est de trouver quand l'utilisateur est au bas de la page et d'exécuter une requête ajax pour charger plus de messages.

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

J'ai besoin de trouver un moyen de vérifier quand l'utilisateur a fait défiler vers le bas de la page avec jQuery.


556
2017-10-09 22:28


origine


Réponses:


Utilisez le .scroll() événement sur window, comme ça:

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

Vous pouvez le tester ici, cela prend le défilement du haut de la fenêtre, donc combien il est descendu, ajoute la hauteur de la fenêtre visible et vérifie si cela est égal à la hauteur du contenu global (document). Si vous vouliez plutôt vérifier si l'utilisateur est près En bas, ça ressemblerait à ceci:

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

Vous pouvez tester cette version ici, juste ajuster ça 100 à n'importe quel pixel du bas que vous voulez déclencher.


883
2017-10-09 22:34



La réponse de Nick Craver fonctionne bien, épargner le problème que la valeur de $(document).height() varie selon le navigateur.

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

function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

au lieu de $(document).height(), de sorte que le code final est:

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

101
2018-05-29 08:42



Je ne suis pas sûr exactement pourquoi cela n'a pas encore été publié, mais selon la documentation de MDN, la manière la plus simple consiste à utiliser les propriétés javascript natives:

element.scrollHeight - element.scrollTop === element.clientHeight

Renvoie true lorsque vous êtes au bas de tout élément défilant. Donc, simplement en utilisant javascript:

element.addEventListener('scroll', function(event)
{
    var element = event.target;
    if (element.scrollHeight - element.scrollTop === element.clientHeight)
    {
        console.log('scrolled');
    }
});

scrollHeight avoir un large soutien dans les navigateurs, à savoir par exemple 8 pour être plus précis, tout en clientHeight et scrollTop sont tous les deux soutenus par tout le monde. Même par exemple 6. Cela devrait être compatible avec plusieurs navigateurs.


52
2017-12-31 18:13



Pour ceux qui utilisent la solution de Nick et qui reçoivent des alertes répétées / des événements, vous pouvez ajouter une ligne de code au-dessus de l'exemple d'alerte:

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

Cela signifie que le code ne se déclenchera que la première fois que vous serez à 100px du bas du document. Il ne se répètera pas si vous faites défiler vers le haut puis redescendre, ce qui peut ou ne peut pas être utile selon ce que vous utilisez pour le code de Nick.


43
2017-10-01 16:51



Suite à l'excellente réponse acceptée par Nick Craver, vous pouvez limiter l'événement de défilement afin qu'il ne soit pas tiré si souvent ainsi augmentation des performances du navigateur:

var _throttleTimer = null;
var _throttleDelay = 100;
var $window = $(window);
var $document = $(document);

$document.ready(function () {

    $window
        .off('scroll', ScrollHandler)
        .on('scroll', ScrollHandler);

});

function ScrollHandler(e) {
    //throttle event:
    clearTimeout(_throttleTimer);
    _throttleTimer = setTimeout(function () {
        console.log('scroll');

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

    }, _throttleDelay);
}

37
2018-03-13 10:22



La réponse de Nick Craver doit être légèrement modifiée pour fonctionner sur iOS 6 Safari Mobile et devrait être:

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

En changeant $ (fenêtre) .height () à window.innerHeight devrait être fait parce que lorsque la barre d'adresse est cachée, 60px supplémentaires sont ajoutés à la hauteur de la fenêtre, mais en utilisant $(window).height() Est-ce que ne pas refléter ce changement, tout en utilisant window.innerHeight Est-ce que.

Remarque: Le window.innerHeight propriété inclut également la hauteur de la barre de défilement horizontale (si elle est rendue), contrairement à $(window).height() qui n'inclura pas la hauteur de la barre de défilement horizontale. Ce n'est pas un problème dans Mobile Safari, mais cela peut provoquer un comportement inattendu dans d'autres navigateurs ou dans les futures versions de Mobile Safari. En changeant == à >=pourrait résoudre ce problème pour les cas d'utilisation les plus courants.

En savoir plus sur le window.innerHeight propriété ici


35
2017-07-03 14:31



Voici un morceau de code qui vous aidera à déboguer votre code, j'ai testé les réponses ci-dessus et je les ai trouvés buggés. J'ai testé les suivants sur Chrome, IE, Firefox, IPad (Safari). Je n'ai pas d'autres installées pour tester ...

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var winElement = $(window)[0];

         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
            alert('bottom');
         }
      });
   });
</script>

Il peut y avoir une solution plus simple, mais je me suis arrêté au point où ÇA A MARCHÉ

Si vous rencontrez toujours des problèmes avec certains navigateurs malveillants, voici un code pour vous aider à déboguer:

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var details = "";
         details += '<b>Document</b><br />';
         details += 'clientHeight:' + docElement.clientHeight + '<br />';
         details += 'clientTop:' + docElement.clientTop + '<br />';
         details += 'offsetHeight:' + docElement.offsetHeight + '<br />';
         details += 'offsetParent:' + (docElement.offsetParent == null) + '<br />';
         details += 'scrollHeight:' + docElement.scrollHeight + '<br />';
         details += 'scrollTop:' + docElement.scrollTop + '<br />';

         var winElement = $(window)[0];
         details += '<b>Window</b><br />';
         details += 'innerHeight:' + winElement.innerHeight + '<br />';
         details += 'outerHeight:' + winElement.outerHeight + '<br />';
         details += 'pageYOffset:' + winElement.pageYOffset + '<br />';
         details += 'screenTop:' + winElement.screenTop + '<br />';
         details += 'screenY:' + winElement.screenY + '<br />';
         details += 'scrollY:' + winElement.scrollY + '<br />';

         details += '<b>End of page</b><br />';
         details += 'Test:' + (docElement.scrollHeight - winElement.innerHeight) + '=' + winElement.pageYOffset + '<br />';
         details += 'End of Page? ';
         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
             details += 'YES';
         } else {
             details += 'NO';
         }

         $('#test').html(details);
      });
   });
</script>
<div id="test" style="position: fixed; left:0; top: 0; z-index: 9999; background-color: #FFFFFF;">

J'espère que cela permettra à quelqu'un de gagner du temps.


14
2018-02-19 09:52