Prüfen Sie, ob ein Benutzer nach unten gescrollt hat

Nick Cravers Antwort funktioniert gut, erspart das Problem, dass der Wert von $(document).height() von Browser zu Browser unterschiedlich ist.

Damit es in allen Browsern funktioniert, verwenden Sie diese Funktion von 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
    );
}

anstelle von $(document).height(), so dass der endgültige Code lautet:

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

Ich bin nicht genau sicher, warum dies noch nicht veröffentlicht wurde, aber gemäß der Dokumentation von MDN ist der einfachste Weg die Verwendung von nativen Javascript-Eigenschaften:

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

Gibt true zurück, wenn Sie sich am unteren Rand eines scrollbaren Elements befinden. Also einfach mit Javascript:

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

scrollHeight hat eine breite Unterstützung in Browsern, von z. B. 8, um genau zu sein, während clientHeight und scrollTop von jedem unterstützt werden. Sogar dh 6. Dies sollte browserübergreifend sicher sein.

Für diejenigen, die die Lösung von Nick verwenden und wiederholte Warnungen/Ereignisse auslösen, können Sie eine Codezeile oberhalb des Alarmbeispiels hinzufügen:

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

Dies bedeutet, dass der Code nur ausgelöst wird, wenn Sie sich zum ersten Mal 100px vom unteren Rand des Dokuments entfernt befinden. Es wird nicht wiederholt, wenn Sie nach oben und dann nach unten scrollen, was je nach Verwendungszweck von Nicks Code nützlich sein kann oder nicht.

Neben der sehr gut akzeptierten Antwort von Nick Craver können Sie das Scroll-Ereignis so drosseln, dass es nicht so häufig ausgelöst wird, wodurch die Browserleistung erhöht wird :

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

Die Antwort von Nick Craver muss leicht modifiziert werden, um unter iOS 6 Safari Mobile zu funktionieren, und sollte folgendermaßen lauten:

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

Das Ändern von $ (window) .height () in window.innerHeight sollte durchgeführt werden, da bei ausgeblendeter Adressleiste ein zusätzlicher 60px hinzugefügt wird Die Höhe des Fensters, aber mit $(window).height() spiegelt not diese Änderung wider, während window.innerHeight dies tut.

Note: Die window.innerHeight-Eigenschaft enthält auch die Höhe der horizontalen Bildlaufleiste (wenn diese gerendert wird), im Gegensatz zu $(window).height(), bei der die Höhe der horizontalen Bildlaufleiste nicht berücksichtigt wird. Dies ist kein Problem in Mobile Safari, kann jedoch zu unerwartetem Verhalten in anderen Browsern oder zukünftigen Versionen von Mobile Safari führen. Das Ändern von == in >= könnte dies für die häufigsten Anwendungsfälle beheben.

Lesen Sie mehr über die window.innerHeight-Eigenschaft hier

Hier ist ein ziemlich einfacher Ansatz:

Elm.onscroll = function() {
    if(Elm.scrollTop + Elm.clientHeight == Elm.scrollHeight) //User has scrolled to the bottom of the element
}

Hier ist ein Code, der Ihnen beim Debuggen helfen wird. Ich habe die obigen Antworten getestet und festgestellt, dass sie fehlerhaft sind. Ich habe die folgenden Tests auf Chrome, IE, Firefox, IPad (Safari) getestet. Ich habe keine anderen zum Testen installiert ...

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

Es kann eine einfachere Lösung geben, aber ich habe an dem Punkt angehalten, an dem IT WORKED

Wenn Sie immer noch Probleme mit einem schädlichen Browser haben, finden Sie hier einige Informationen zum Debuggen:

<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;">

Ich hoffe, dass dies jemandem etwas Zeit spart.

var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;

Er berechnet die Bildlaufleiste für die Entfernung zum unteren Rand des Elements . Entspricht 0, wenn die Bildlaufleiste den unteren Rand erreicht hat. 

Bitte überprüfen Sie diese Antwort

 window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
       console.log("bottom");
    }
};

Sie können mit footerHeight - document.body.offsetHeight feststellen, ob Sie sich in der Nähe der Fußzeile befinden oder die Fußzeile erreicht haben

Dies ist meine zwei Cent:

$('#container_element').scroll( function(){
        console.log($(this).scrollTop()+' + '+ $(this).height()+' = '+ ($(this).scrollTop() + $(this).height())   +' _ '+ $(this)[0].scrollHeight  );
        if($(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight){
            console.log('bottom found');
        }
    });

Pure JS mit cross-browser und debouncing _ ​​(ziemlich gute Leistung)

var CheckIfScrollBottom = debouncer(function() {
    if(getDocHeight() == getScrollXY()[1] + window.innerHeight) {
       console.log('Bottom!');
    }
},500);

document.addEventListener('scroll',CheckIfScrollBottom);

function debouncer(a,b,c){var d;return function(){var e=this,f=arguments,g=function(){d=null,c||a.apply(e,f)},h=c&&!d;clearTimeout(d),d=setTimeout(g,b),h&&a.apply(e,f)}}
function getScrollXY(){var a=0,b=0;return"number"==typeof window.pageYOffset?(b=window.pageYOffset,a=window.pageXOffset):document.body&&(document.body.scrollLeft||document.body.scrollTop)?(b=document.body.scrollTop,a=document.body.scrollLeft):document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)&&(b=document.documentElement.scrollTop,a=document.documentElement.scrollLeft),[a,b]}
function getDocHeight(){var a=document;return Math.max(a.body.scrollHeight,a.documentElement.scrollHeight,a.body.offsetHeight,a.documentElement.offsetHeight,a.body.clientHeight,a.documentElement.clientHeight)}

Demo:http://jsbin.com/geherovena/edit?js,output

PS: Debouncer, getScrollXY, getDocHeight nicht von mir geschrieben

Ich zeige nur, wie es funktioniert und wie ich es tun werde

Sie können den folgenden Code ausprobieren,

$("#dashboard-scroll").scroll(function(){
    var ele = document.getElementById('dashboard-scroll');
    if(ele.scrollHeight - ele.scrollTop === ele.clientHeight){
       console.log('at the bottom of the scroll');
    }
});

Nick antwortet auf das feine, aber Sie haben Funktionen, die sich beim Scrollen selbst wiederholen oder überhaupt nicht funktionieren, wenn der Benutzer das Fenster vergrößert hat. Ich fand eine einfache Lösung, nur math.round um die erste Höhe und es funktioniert genauso wie angenommen.

    if (Math.round($(window).scrollTop()) + $(window).innerHeight() == $(document).height()){
    loadPagination();
    $(".go-up").css("display","block").show("slow");
}

Versuchen Sie dies für die Übereinstimmungsbedingung, wenn Sie zum unteren Ende blättern

if ($(this)[0].scrollHeight - $(this).scrollTop() == 
    $(this).outerHeight()) {

    //code for your custom logic

}

Alle diese Lösungen funktionieren für Firefox und Chrome nicht. Daher verwende ich benutzerdefinierte Funktionen von Miles O'Keefe und meder omuraliev wie folgt:

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

function getWindowSize()
{
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [myWidth, myHeight];
}

$(window).scroll(function()
{
    if($(window).scrollTop() + getWindowSize()[1] == getDocHeight())
    {
        alert("bottom!");
    }
});

Lassen Sie mich den Ansatz ohne JQuery zeigen. Einfache JS-Funktion: 

function isVisible(elem) {
  var coords = elem.getBoundingClientRect();
  var topVisible = coords.top > 0 && coords.top < 0;
  var bottomVisible = coords.bottom < shift && coords.bottom > 0;
  return topVisible || bottomVisible;
}

Kurzes Beispiel, wie man es benutzt:

var img = document.getElementById("pic1");
    if (isVisible(img)) { img.style.opacity = "1.00";  }

Dies liefert genaue Ergebnisse, wenn ein scrollbares element (d. H. Nicht window) geprüft wird:

// `element` is a native JS HTMLElement
if ( element.scrollTop == (element.scrollHeight - element.offsetHeight) )
    // Element scrolled to bottom

offsetHeight sollte die tatsächliche sichtbare Höhe eines Elements (einschließlich Auffüllung, Rand, und Bildlaufleisten) angeben, und scrollHeight ist die gesamte Höhe eines Elements einschließlich unsichtbarer (überlaufender) Bereiche.

jQuerys .outerHeight() sollte ein ähnliches Ergebnis wie JSs .offsetHeight --.__ ergeben. Die Dokumentation in MDN für offsetHeight ist unklar, was die browserübergreifende Unterstützung angeht. Um mehr Optionen abzudecken, ist dies vollständiger:

var offsetHeight = ( container.offsetHeight ? container.offsetHeight : $(container).outerHeight() );
if  ( container.scrollTop == (container.scrollHeight - offsetHeight) ) {
   // scrolled to bottom
}

Um die wiederholte Warnung von Nick 'Antwort zu stoppen

ScrollActivate();

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

Google Chrome gibt die volle Höhe der Seite an, wenn Sie $(window).height() aufrufen.

Verwenden Sie stattdessen window.innerHeight, um die Höhe Ihres Fensters abzurufen. Notwendige Überprüfung sollte sein:

if($(window).scrollTop() + window.innerHeight > $(document).height() - 50) {
    console.log("reached bottom!");
}

Ich habe @ddanone answerear verwendet und Ajax-Anruf hinzugefügt. 

$('#mydiv').on('scroll', function(){
  function infiniScroll(this);
});

function infiniScroll(mydiv){
console.log($(mydiv).scrollTop()+' + '+ $(mydiv).height()+' = '+ ($(mydiv).scrollTop() + $(mydiv).height())   +' _ '+ $(mydiv)[0].scrollHeight  );

if($(mydiv).scrollTop() + $(mydiv).height() == $(mydiv)[0].scrollHeight){
    console.log('bottom found');
    if(!$.active){ //if there is no ajax call active ( last ajax call waiting for results ) do again my ajax call
        myAjaxCall();
    }
}

}

Meine Lösung in einfachen js:

let el=document.getElementById('el');
el.addEventListener('scroll', function (e) {
		if (el.scrollHeight - el.scrollTop - el.clientHeight<0) {
      console.log('Bottom')
    }
});

#el{
  width:300px;
  height:100px;
  overflow-y:scroll;
}

<div id="el">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>

Hier sind meine zwei Cent, da die akzeptierte Antwort für mich nicht funktionierte.

var documentAtBottom = (document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight;