it-swarm.com.de

javascript: Scrollende erkennen

Ich habe eine div-Ebene, in der overflow auf scroll gesetzt ist. 

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


56
Zebra

Die akzeptierte Antwort war grundlegend fehlerhaft, sie wurde inzwischen gestrichen. Die richtige Antwort ist:

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

Getestet dies in Firefox, Chrome und Opera. Es klappt.

91
Bjorn Tipling

OK Hier ist eine gute und richtige Lösung

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

so geht die funktion.

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

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

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

Ich hoffe, das hilft jedem!

6
just_user

Das hat für mich funktioniert: 

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

Muss jQuery 1.6 oder höher verwenden

4
AlexQueue

Ich habe eine Alternative gefunden, die funktioniert.

Keine dieser Antworten funktionierte für mich (derzeit wird in FireFox 22.0 getestet), und nach langem Nachforschen fand ich eine scheinbar sauberere und geradlinigere Lösung.

Implementierte 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-hat-reached-at-the-bottom-in-js-td145336.html

Grüße

3
Chandler Zwolle

Ich habe eine Event-basierte Lösung basierend auf der Antwort von Bjorn Tipling entwickelt:

(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 nutzen die Veranstaltung so:

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

Übrigens: Sie müssen dieses CSS für Javascript hinzufügen, um zu wissen, wie lange die Seite ist 

html, body {
    height: 100%;
}

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

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

Ich habe auch danach gesucht und selbst nachdem ich alle Kommentare und mehr überprüft habe, ist dies die Lösung, um zu überprüfen, ob sie unten angekommen sind oder nicht.

1
Moshe Cohen

Da innerHeight in einigen alten IE -Versionen nicht 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();
    }
});
0
Rado

Sehen Sie sich dieses Beispiel an: MDN Element.scrollHeight

Ich empfehle, dass Sie sich dieses Beispiel ansehen: stackoverflow.com/a/24815216 ..., das eine browserübergreifende Behandlung für die Bildlaufaktion implementiert.

Sie können das folgende Snippet 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");
    }
});
0
jherax