Überprüfen Sie, ob ein Benutzer nach unten gescrollt hat

Ich mache ein Paginierungssystem (ähnlich wie Facebook), bei dem der Inhalt geladen wird, wenn der Benutzer nach unten scrollt. Ich kann mir vorstellen, dass der beste Weg, dies zu tun, darin besteht, herauszufinden, wann sich der Benutzer am Ende der Seite befindet, und eine Ajax-Abfrage auszuführen, um weitere Beiträge zu laden.

Das einzige Problem ist, dass ich nicht weiß, wie ich überprüfen soll, ob der Benutzer mit jQuery zum Ende der Seite gescrollt hat. Irgendwelche Ideen?

Ich muss einen Weg finden, um zu überprüfen, ob der Benutzer mit jQuery zum Ende der Seite gescrollt hat.

Verwenden Sie das .scroll()Ereignis windowwie folgt:

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

Sie können es hier testen . Dabei wird der obere Bildlauf des Fensters ausgeführt. Wie stark der Bildlauf nach unten erfolgt, wird die Höhe des sichtbaren Fensters hinzugefügt und überprüft, ob dies der Höhe des Gesamtinhalts entspricht ( document). Wenn Sie , ob der Benutzer stattdessen überprüfen wollen , in der Nähe der Unterseite, würde es in etwa so aussehen:

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

Sie können hier die Version testen , stellen nur , dass 100, was auch immer Pixel von unten Sie auslösen wollen.

Die Antwort von Nick Craver funktioniert einwandfrei. Ersparen Sie sich das Problem, dass der Wert von $(document).height()je nach Browser variiert.

Verwenden Sie diese Funktion von James Padolsey, damit es in allen Browsern funktioniert :

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 mir nicht ganz sicher, warum dies noch nicht veröffentlicht wurde, aber gemäß der Dokumentation von MDN ist der einfachste Weg die Verwendung nativer Javascript-Eigenschaften:

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

Gibt true zurück, wenn Sie sich am Ende 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');
    }
});

scrollHeighthaben breite Unterstützung in Browsern, von 8 bis genauer, clientHeightund scrollTopbeide werden von allen unterstützt. Sogar dh 6. Dies sollte browserübergreifend sicher sein.

Für diejenigen, die Nicks Lösung verwenden und wiederholte Warnungen / Ereignisse erhalten, können Sie eine Codezeile über dem Warnungsbeispiel 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 innerhalb von 100 Pixel am unteren Rand des Dokuments befinden. Es wird nicht wiederholt, wenn Sie wieder nach oben und dann nach unten scrollen. Dies kann nützlich sein oder auch nicht, je nachdem, wofür Sie Nicks Code verwenden.

Zusätzlich zu der hervorragenden akzeptierten Antwort von Nick Craver können Sie das Bildlaufereignis drosseln, damit 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 geändert werden, um mit iOS 6 Safari Mobile zu funktionieren. Sie sollte 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, wenn die Adressleiste ausgeblendet ist, zusätzliche 60 Pixel zur Fensterhöhe hinzugefügt werden, die Verwendung diese Änderung $(window).height()jedoch nicht widerspiegelt, während sie verwendet window.innerHeightwird.

Hinweis : Die window.innerHeightEigenschaft enthält auch die Höhe der horizontalen Bildlaufleiste (sofern diese gerendert wird), im Gegensatz $(window).height()dazu nicht die Höhe der horizontalen Bildlaufleiste. Dies ist in Mobile Safari kein Problem, kann jedoch in anderen Browsern oder zukünftigen Versionen von Mobile Safari zu unerwartetem Verhalten führen. Durch Ändern ==auf >=kann dies für die meisten Anwendungsfälle behoben werden.

Lesen Sie mehr über die window.innerHeightImmobilie hier

Hier ist ein ziemlich einfacher Ansatz

const didScrollToBottom = elm.scrollTop + elm.clientHeight == elm.scrollHeight

Beispiel

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

Wo elmwird ein Element abgerufen, dh document.getElementById.

Hier ist ein Teil des Codes, der Ihnen beim Debuggen Ihres Codes hilft. Ich habe die obigen Antworten getestet und festgestellt, dass sie fehlerhaft sind. Ich habe die folgenden 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 mag eine einfachere Lösung geben, aber ich habe an dem Punkt angehalten, an dem es funktioniert hat

Wenn Sie immer noch Probleme mit einem nicht autorisierten Browser haben, finden Sie hier einen Code, der Ihnen beim Debuggen hilft:

<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, das spart jemandem etwas Zeit.

Bitte überprüfen Sie diese Antwort

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

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

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

Es berechnet die Distanz-Bildlaufleiste zum unteren Rand des Elements. Gleich 0, wenn die Bildlaufleiste unten angekommen ist.

Das sind 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, getDocHeightnicht von mir geschrieben

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

Meine Lösung in einfachen js:

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

#el{
  width:400px;
  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>

Versuchen Sie dies für die Übereinstimmungsbedingung, wenn Sie zum unteren Ende scrollen

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

    //code for your custom logic

}

Nick antwortet gut, aber Sie haben Funktionen, die sich beim Scrollen wiederholen oder überhaupt nicht funktionieren, wenn der Benutzer das Fenster gezoomt hat. Ich habe mir eine einfache Lösung ausgedacht, nur Mathe. Um die erste Höhe herum und es funktioniert genauso wie angenommen.

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

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

Dies liefert genaue Ergebnisse, wenn ein scrollbares Element überprüft wird (dh nicht window):

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

offsetHeightsollte die tatsächlich sichtbare Höhe eines Elements (einschließlich Polsterung, Rand und Bildlaufleisten) angeben und scrollHeightist die gesamte Höhe eines Elements einschließlich unsichtbarer (übergelaufener) Bereiche.

jQuery‚s .outerHeight()sollte ähnliches Ergebnis zu JS das geben .offsetHeight- die Dokumentation in MDN für offsetHeightüber seine Cross-Browser - Unterstützung ist unklar. 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
}

Alle diese Lösungen funktionieren bei 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!");
    }
});

Hier sind meine zwei Cent, da die akzeptierte Antwort bei mir nicht funktioniert hat.

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

Anstatt das Bildlaufereignis anzuhören, ist die Verwendung von Intersection Observer die kostengünstige Methode, um zu überprüfen, ob das letzte Element im Ansichtsfenster sichtbar war (dh der Benutzer wurde nach unten gescrollt). Es wird auch für IE7 mit der Polyfüllung unterstützt .

var observer = new IntersectionObserver(function(entries){
   if(entries[0].isIntersecting === true)
      console.log("Scrolled to the bottom");
   else
      console.log("Not on the bottom");
}, {
   root:document.querySelector('#scrollContainer'),
   threshold:1 // Trigger only when whole element was visible
});

observer.observe(document.querySelector('#scrollContainer').lastElementChild);

#scrollContainer{
  height: 100px;
  overflow: hidden scroll;
}

<div id="scrollContainer">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>
</div>

Lassen Sie mich ohne JQuery Ansatz 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 zur Verwendung:

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

Ich habe @ddanone answear verwendet und Ajax call 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();
    }
}

}}

Um die wiederholte Benachrichtigung über Nicks 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 anrufen $(window).height()

Verwenden Sie stattdessen, um window.innerHeightdie Höhe Ihres Fensters abzurufen. Notwendige Prüfung sollte sein:

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

Anscheinend funktionierte für mich "Körper" und nicht "Fenster" wie folgt:

$('body').scroll(function() {


 if($('body').scrollTop() + $('body').height() == $(document).height()) {
     //alert at buttom
 }
 });

Für die browserübergreifende Kompatibilität verwenden Sie:

  function getheight(){
    var doc = document;
    return  Math.max(
        doc.body.scrollHeight, doc.documentElement.scrollHeight,
        doc.body.offsetHeight, doc.documentElement.offsetHeight,
        doc.body.clientHeight, doc.documentElement.clientHeight

        );
   }

und dann anstelle von $ (document) .height () die Funktion getheight () aufrufen

$('body').scroll(function() {


   if($('body').scrollTop() + $('body').height() == getheight()  ) {
     //alert at bottom
 }
});

für den bodennahen Gebrauch:

$('body').scroll(function() {


if($('body').scrollTop() + $('body').height() > getheight() -100 ) {
    //alert near bottom
 }
 });