web-dev-qa-db-fra.com

javascript: détecter les fins de défilement

J'ai une couche div avec overflow défini sur scroll. 

Lorsque je fais défiler la div au bas de la liste, je veux exécuter une fonction.


javascriptjqueryhtmlscrollbarscroll
56
Zebra

La réponse acceptée était fondamentalement erronée, elle a depuis été supprimée. La bonne réponse est:

function scrolled(e) {
  if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {
    scrolledToBottom(e);
  }
}

Testé cela dans Firefox, Chrome et Opera. Ça marche.

91
Bjorn Tipling

OK Voici une solution bonne et appropriée

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

alors 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
   }
}
6
maxspan

Je ne pouvais obtenir aucune des réponses ci-dessus au travail alors voici une troisième option qui fonctionne pour moi! (Ceci est utilisé avec jQuery)

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

J'espère que cela aide n'importe qui!

6
just_user

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

4
AlexQueue

J'ai trouvé une alternative qui fonctionne.

Aucune de ces réponses n'a fonctionné pour moi (en cours de test dans FireFox 22.0), et après de nombreuses 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

3
Chandler Zwolle

J'ai créé une solution événementielle 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 que javascript sache combien de temps la page est 

html, body {
    height: 100%;
}

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

1
Pylinux
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight)
{
//your code here
}

Moi aussi j'ai cherché et même après avoir vérifié tous les commentaires ici et plus, c'est la solution pour vérifier si atteint le fond ou pas.

1
Moshe Cohen

innerHeight ne fonctionnant pas avec certaines anciennes versions 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();
    }
});
0
Rado

Regardez cet exemple: MDN Element.scrollHeight

Je vous 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");
    }
});
0
jherax