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

667

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.

Johnny
quelle
Das ist lustig, ich versuche herauszufinden, welche Funktion aufgerufen wird, wenn ich nach unten scrolle, damit ich diese ärgerliche "Funktion" blockieren kann.
Endolith
Für eine React.js-Lösung könnte dieser Link helfen: stackoverflow.com/a/53158893/4265546
raksheetbhat

Antworten:

1022

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.

Nick Craver
quelle
32
Wie immer kommst du vor mir dorthin. Wenn Sie im OP einen Container mit Posts haben, verwenden Sie die ID anstelle von "window". Außerdem möchten Sie möglicherweise die letzte .height () in scrollHeight
Christian
4
Firefox ruft Alarm auf ("unten!"); viele Male (funktioniert gut mit Chrom und Safari)
Marco Matarazzi
3
Es ist ein bisschen fehlerhaft, wenn Sie einen console.log()Alarm ausführen, wird der Befehl manchmal wiederholt.
Jürgen Paul
19
@ KevinVella Vella gute Kombination ist, dies mit _.debounce () im Unterstrich-Dienstprogramm zu verwenden, um zu verhindern, dass es ausgelöst wird, bis der Benutzer aufgehört hat zu scrollen - underscorejs.org/#debounce -
JohnnyFaldo
3
@ NickCraver Gibt es eine reine JS-Implementierung?
Dewsworld
116

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!");
       }
   });
Miles O'Keefe
quelle
6
Er hat mit einer leicht komprimierten Versionsfunktion 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); }
Drew
Das warnt mich, wenn ich oben und nicht unten bin (Chrome).
Damien Roche
Es ist möglicherweise besser, minanstatt zu verwenden max, insbesondere wenn ohnehin ein Rand vorhanden ist, um zu vermeiden, dass der Benutzer versehentlich daran gehindert wird, zum Ende Ihrer Seite zu scrollen.
Solomon Ucko
103

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élix Gagnon-Grenier
quelle
1
Beachten Sie, dass dies in einigen Situationen möglicherweise nicht der Fall ist. Firefox 47 meldet einen Textbereich clientHeight als 239, während die obige Gleichung 253 ergibt, wenn nach unten gescrollt wird. Vielleicht Polsterung / Rand oder etwas beeinflusst es? In jedem Fall würde es nicht schaden, etwas Spielraum hinzuzufügen var isAtBottom = ( logField.scrollHeight - logField.scrollTop <= logField.clientHeight + 50 );. Dies ist nützlich, um ein Feld nur dann automatisch zu scrollen, wenn es sich bereits unten befindet (damit der Benutzer einen bestimmten Teil eines Echtzeitprotokolls manuell untersuchen kann, ohne seinen Platz zu verlieren usw.).
Beejor
Ich würde hinzufügen, dass es möglich ist, falsche Negative zurückzugeben, da eine Seite eine kleine Dezimalstelle zurückgeben könnte, während die andere Seite eine ganze Zahl zurückgibt (z. B. 200.181819304947und 200). Ich habe ein hinzugefügt Math.floor(), um damit umzugehen, aber ich weiß nicht, wie zuverlässig dies sein wird.
Hanna
1
Bei mir funktioniert das nicht browserübergreifend. Ich bekomme auf Chrom ganz andere Ergebnisse als auf Firefox.
Tadej
1
Ich habe dies für das <body> -Element versucht, und dies wird ausgelöst, wenn der Browser nach oben und nicht nach unten gescrollt wird.
Chris Sobolewski
10
Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) <= 3.0(Ersetzen Sie 3.0 durch die Pixeltoleranz, die Sie für Ihre Umstände für angemessen halten.) Dies ist der Weg zu gehen , weil (A) clientHeight, scrollTopund clientHeightalle sind gerundet , die möglicherweise zu einem 3px Fehler , wenn alle align führen könnten, (B) 3 Pixel für den Benutzer kaum sichtbar sind , so dass der Benutzer denken kann etwas mit Ihrer Website falsch ist Wenn sie "denken", befinden sie sich am Ende der Seite, obwohl dies nicht der Fall ist, und (C) bestimmte Geräte (insbesondere mauslose) können beim Scrollen ein merkwürdiges Verhalten aufweisen.
Jack Giffin
50

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.

Tim Carr
quelle
1
Ich hätte nur kommentiert und gesagt, wo diese Codezeile ist, da sie für die Antwort eines anderen relevant ist, aber +1 für die Absicht!
Nate-Wilkins
Entschuldigung, ich konnte (und kann immer noch nicht) sehen, wie ich der Antwort einen Kommentar hinzufügen kann (wie ich es hier kann)?
Tim Carr
Ja, neue Benutzer können Posts keinen Kommentar hinzufügen, es sei denn, Sie erhalten mehr Wiederholungen.
Nate-Wilkins
Außerhalb der ersten, wenn Sie eine andere setzen könnten, wenn dies testet, ob die Änderung, die das Skript vornehmen soll, vorhanden ist, beispielsweise eine Klasse, die auf ein div angewendet wurde. Dies würde die zweite verschachtelt machen, wenn sie nicht ausgeführt wird, wenn sie bereits ausgeführt wurde.
1934286
Wie kann ich eine bestimmte Div-ID anstelle des gesamten Fensters auswählen?
James Smith
40

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);
}
George Filippakos
quelle
Es sollte wahrscheinlich darauf hingewiesen werden, dass dies Underscore.js erfordert: underscorejs.org . Es ist jedoch ein sehr guter Punkt. Das Scroll-Ereignis sollte so gut wie immer gedrosselt werden, um ernsthafte Leistungsprobleme zu vermeiden.
Jude Osborn
Vielleicht bin ich es nur und es könnte ein Benchmarking gebrauchen, aber ich mag die Idee nicht, bei jedem Scroll-Ereignis clearTimeout und setTimeout aufzurufen. Ich würde 1 setTimeout ausgeben und einige Wachen in diesem Handler hinzufügen. Es ist wahrscheinlich nur eine Mikrooptimierung (wenn überhaupt).
Grimasse der Verzweiflung
Dies ist eine wirklich nette Ergänzung! Ich kann mir eine weitere Verbesserung vorstellen. Derzeit wird die Funktion zum Überprüfen der Höhe nicht ausgeführt, wenn der Benutzer weiter scrollt. Wenn dies ein Problem ist (z. B. wenn Sie die Funktion auslösen möchten, wenn der Benutzer auf halber Höhe gescrollt hat, unabhängig davon, ob er weiter scrollt), können Sie leicht sicherstellen, dass die Funktion tatsächlich aufgerufen wird, während mehrere Aufrufe während des ausgewählten Intervalls weiterhin verboten sind. Hier ist ein Kern, um es zu zeigen. gist.github.com/datacarl/7029558
datacarl
Was? Eine Maschinenladung aufrufen, um eine einfache Berechnung zu verhindern? Ich sehe nicht, wie das überhaupt effizienter ist
Rambatino
37

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

Yosi
quelle
window.innerHeight machte mehr Sinn für das, was ich erreichen wollte, danke!
Amir5000
Wie erhalte ich die verbleibende Höhe nach dem Scrollen?
OPV
20

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.

Frederik Witte
quelle
17

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.

Talon
quelle
Beste Antwort für Vanilla js, keine jQuery-Lösung. Verwenden Sievar docElement = document.documentElement; var winElement = window
jperelli
Dies im Jahr 2019. Stattdessen winElement.pageYOffsetkönnen Sie auch verwenden winElement.scrollY.
Noel Abrahams
15

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

Junaid Qadir
quelle
12
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.

Vasyl Gutnyk
quelle
1
Ich habe folgendes getan und einwandfrei gearbeitet. Vielen Dank. var shouldScroll = (elem.scrollHeight - elem.scrollTop - elem.clientHeight) == 0;
Jiminssy
11

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');
        }
    });
Ddanon
quelle
Ich habe versucht, Ihre Lösung zu verwenden, sie funktioniert einwandfrei, aber in den Fällen, in denen das Element gepolstert ist - es funktioniert nicht, weil es die reine Höhe des Elements ohne Einbeziehung der Polsterung berechnet, um dies zu lösen. Ich habe dies geändert $(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight=>$(this).scrollTop() + $(this).outerHeight(true) >= $(this)[0].scrollHeight
Taras Chernata
6

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

l2aelba
quelle
Perfekt. Getestet in Firefox und Chrome
Erlisar Vasquez
Ich erhalte den folgenden Fehler: Erwartete 3 Argumente, aber 2. Ein Argument 'c' wurde nicht angegeben.
7.
6

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>

Bakos Bence
quelle
4

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

}
Hiren Patel
quelle
3

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

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

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
}
Yuval A.
quelle
Versuchen Sie es, Math.floor(element.scrollTop) === element.scrollHeight - element.offsetHeightfalls das scrollTop eine Dezimalzahl ist, ohne die es nicht funktioniertMath.floor()
Michail Michailidis
1

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

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

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

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>

StefansArya
quelle
Das Problem mit Intersection Observer besteht darin, dass bei einem relativ kleinen Startfenster (z. B. Grundlayout vor dem Abrufen von Bildern ohne Bildlaufleiste) ein Beobachterrückruf sofort ausgelöst wird. Der Bildlauf-Listener wartet tatsächlich darauf, dass eine Person einen Bildlauf durchführt. Die Bildlaufleiste wird erst angezeigt, wenn der erste Stapel von Bildern usw. abgerufen wurde. Intersection Observer ist also nicht alles in einer Lösung.
Aleks
@Aleks Sie können den .observe(...)Listener für ein Ereignis aufrufen, z. B. wenn der Benutzer mit dem Mauszeiger über Ihren Bildlaufcontainer fährt / ihn berührt, damit er nicht sofort ausgelöst wird.
StefansArya
0

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";  }
Alexei Zababurin
quelle
5
Dies beantwortet die Frage nicht. Die Frage war, wie man erkennt, dass die Benutzer das Fenster ganz nach unten gescrollt haben. Ihr Code prüft, ob ein bestimmtes Element angezeigt wird.
Peter Hall
0

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

}}

Henrique C.
quelle
0

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

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

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