javascript: détecter fin de défilement

Je ne pouvais pas obtenir l'une des réponses ci-dessus, à travailler voici donc une troisième option qui fonctionne pour moi! (Ceci est utilisé avec jQuery)

if (($(window).innerHeight() + $(window).scrollTop()) >= $("body").height()) {
    //do stuff
}

Espérons que cela aide tout le monde!

OK voici une bonne Solution

Vous avez un appel Div avec un id="myDiv"

Donc la fonction va.

function GetScrollerEndPoint()
{
   var scrollHeight = $("#myDiv").prop('scrollHeight');
   var divHeight = $("#myDiv").height();
   var scrollerEndPoint = scrollHeight - divHeight;

   var divScrollerTop =  $("#myDiv").scrollTop();
   if(divScrollerTop === scrollerEndPoint)
   {
       //Your Code 
       //The Div scroller has reached the bottom
   }
}

Cela a fonctionné pour moi:

$(window).scroll(function() {
  buffer = 40 // # of pixels from bottom of scroll to fire your function. Can be 0
  if ($(".myDiv").prop('scrollHeight') - $(".myDiv").scrollTop() <= $(".myDiv").height() + buffer )   {
    doThing();
  }
});

Doit utiliser jQuery 1.6 ou supérieur

J'ai trouvé une alternative qui fonctionne.

Aucune de ces réponses n'a fonctionné pour moi (actuellement testé dans FireFox 22.0), et après beaucoup de recherches, j'ai trouvé, ce qui semble être, une solution beaucoup plus propre et simple.

Solution implémentée:

function IsScrollbarAtBottom() {
    var documentHeight = $(document).height();
    var scrollDifference = $(window).height() + $(window).scrollTop();
    return (documentHeight == scrollDifference);
}

Ressource: http://jquery.10927.n7.nabble.com/How-can-we-find-out-scrollbar-position-has-reached-at-the-bottom-in-js-td145336.html

Cordialement

J'ai créé une solution basée sur les événements basée sur la réponse de Bjorn Tipling:

(function(doc){
    'use strict';

    window.onscroll = function (event) {
        if (isEndOfElement(doc.body)){
            sendNewEvent('end-of-page-reached');
        }
    };

    function isEndOfElement(element){
        //visible height + pixel scrolled = total height 
        return element.offsetHeight + element.scrollTop >= element.scrollHeight;
    }

    function sendNewEvent(eventName){
        var event = doc.createEvent('Event');
        event.initEvent(eventName, true, true);
        doc.dispatchEvent(event);
    }
}(document));

Et vous utilisez l'événement comme ceci:

document.addEventListener('end-of-page-reached', function(){
    console.log('you reached the end of the page');
});

BTW: vous devez ajouter ce CSS pour javascript pour savoir combien de temps la page est

html, body {
    height: 100%;
}

Démo: http://plnkr.co/edit/CCokKfB16iWIMddtWjPC?p=preview

Jetez un oeil à cet exemple: Élément MDN.scrollHeight

Je recommande de consulter cet exemple: stackoverflow.com/a/24815216... qui implémente une gestion multi-navigateur pour l'action de défilement.

Vous pouvez utiliser l'extrait suivant:

//attaches the "scroll" event
$(window).scroll(function (e) {
    var target = e.currentTarget,
        scrollTop = target.scrollTop || window.pageYOffset,
        scrollHeight = target.scrollHeight || document.body.scrollHeight;
    if (scrollHeight - scrollTop === $(target).innerHeight()) {
      console.log("► End of scroll");
    }
});

Puisque innerHeight ne fonctionne pas dans certaines anciennes versions D'IE, clientHeight peut être utilisé:

$(window).scroll(function (e){
    var body = document.body;    
    //alert (body.clientHeight);
    var scrollTop = this.pageYOffset || body.scrollTop;
    if (body.scrollHeight - scrollTop === parseFloat(body.clientHeight)) {
        loadMoreNews();
    }
});