javascript: scroll end erkennen

Question

Ich habe eine div Schicht mit overflow auf scroll gesetzt.

Wenn ich bis zum Ende der div scrollte, möchte ich eine Funktion ausführen.

Answer 1

Die Antwort akzeptiert war grundlegend fehlerhaft, hat es seit gelöscht. Die richtige Antwort lautet:

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

Getestet in Firefox, Chrome und Opera. Es klappt.

Answer 2

Ich konnte keine der oben genannten Antworten erhalten, also hier ist eine dritte Option, die für mich funktioniert! (Dies wird mit jQuery verwendet)

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

Hoffe, das hilft jedem!

Answer 3

Das ist für mich gearbeitet:

$(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(); 
    } 
}); 

Must verwenden jQuery 1.6 oder höher

Answer 4

fand ich eine Alternative, die funktioniert.

Keiner dieser Antworten funktionierte für mich (derzeit Test in FireFox 22.0), und nach viel Forschung fand ich, was scheint, eine viel sauberere und unkomplizierte Lösung.

Implementiert Lösung:

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

Grüße

Answer 5

OK Dies ist eine gute und richtige Lösung

Sie haben einen Div Anruf mit einem id="myDiv"

also die Funktion g oes.

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 
    } 
} 

Answer 6

Werfen Sie einen Blick auf dieses Beispiel: MDN Element.scrollHeight

Ich empfehle, dass dieses Beispiel finden Sie unter: stackoverflow.com/a/24815216..., die eine Cross-Browser für die Scroll-Aktion Handling implementiert.

Sie können die folgenden Ausschnitt verwenden:

//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"); 
    } 
}); 

Answer 7

Da innerHeight nicht in einigen alten IE-Versionen funktioniert, kann clientHeight verwendet werden:

$(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(); 
    } 
}); 

Answer 8

Ich habe eine basierte Lösung Ereignis basierend auf Bjorn Tiplings Antwort:

(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)); 

Und Sie verwenden den Vorabend nt wie folgt aus:

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

BTW: Sie müssen diese CSS für Javascript hinzufügen zu wissen, wie lange die Seite

html, body { 
    height: 100%; 
} 

Demo: http://plnkr.co/edit/CCokKfB16iWIMddtWjPC?p=preview