wake-up-neo.com

Prü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 blättert. Ich stelle mir vor, der beste Weg, dies zu tun, besteht darin, 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 mit jQuery nachschaue, ob der Benutzer am Ende der Seite gescrollt ist. Irgendwelche Ideen?

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

583
Johnny

Verwenden Sie das Ereignis .scroll() für window wie folgt:

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

Sie können es hier testen , hiermit wird die obere Bildlaufleiste des Fensters aufgerufen, dh, wie viel es nach unten gescrollt wird, addiert die Höhe des sichtbaren Fensters und prüft, ob dies der Höhe des gesamten Inhalts entspricht (document). Wenn Sie stattdessen überprüfen möchten, ob der Benutzer in der Nähe von am unteren Ende ist, würde er ungefähr so ​​aussehen:

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

Sie können diese Version hier testen , passen Sie den 100 an das Pixel an, das Sie unten auslösen möchten.

925
Nick Craver

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!");
       }
   });
107
Miles O'Keefe

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.

67

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.

46
Tim Carr

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

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

36
Yosi

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
}
19
Frederik Witte

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.

14
Talon
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. 

10
Vasyl Gutnyk

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

10
Junaid Qadir

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

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

5
l2aelba

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

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");
}
3
Florin Andrei

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

}
2
Hiren Patel

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!");
    }
});
1
hayj

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

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
}

0
Yuval A.

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!");
        }
    });
}
0
Arun Prasad E S

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!");
}
0
alierdogan7

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

}

0
Henrique C.

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>

0
Bakos Bence

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

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