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.
javascript
jquery
scroll
pagination
Johnny
quelle
quelle
Antworten:
Verwenden Sie das
.scroll()
Ereigniswindow
wie folgt: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:Sie können hier die Version testen , stellen nur , dass
100
, was auch immer Pixel von unten Sie auslösen wollen.quelle
console.log()
Alarm ausführen, wird der Befehl manchmal wiederholt.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 :
anstelle von
$(document).height()
, so dass der endgültige Code lautet:quelle
min
anstatt zu verwendenmax
, insbesondere wenn ohnehin ein Rand vorhanden ist, um zu vermeiden, dass der Benutzer versehentlich daran gehindert wird, zum Ende Ihrer Seite zu scrollen.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:
Gibt true zurück, wenn Sie sich am Ende eines scrollbaren Elements befinden. Also einfach mit Javascript:
scrollHeight
haben breite Unterstützung in Browsern, von 8 bis genauer,clientHeight
undscrollTop
beide werden von allen unterstützt. Sogar dh 6. Dies sollte browserübergreifend sicher sein.quelle
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.).200.181819304947
und200
). Ich habe ein hinzugefügtMath.floor()
, um damit umzugehen, aber ich weiß nicht, wie zuverlässig dies sein wird.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
,scrollTop
undclientHeight
alle 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.Für diejenigen, die Nicks Lösung verwenden und wiederholte Warnungen / Ereignisse erhalten, können Sie eine Codezeile über dem Warnungsbeispiel hinzufügen:
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.
quelle
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 :
quelle
Die Antwort von Nick Craver muss leicht geändert werden, um mit iOS 6 Safari Mobile zu funktionieren. Sie sollte lauten:
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 verwendetwindow.innerHeight
wird.Hinweis : Die
window.innerHeight
Eigenschaft 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.innerHeight
Immobilie hierquelle
Hier ist ein ziemlich einfacher Ansatz
const didScrollToBottom = elm.scrollTop + elm.clientHeight == elm.scrollHeight
Beispiel
Wo
elm
wird ein Element abgerufen, dhdocument.getElementById
.quelle
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 ...
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:
Ich hoffe, das spart jemandem etwas Zeit.
quelle
var docElement = document.documentElement; var winElement = window
winElement.pageYOffset
können Sie auch verwendenwinElement.scrollY
.Bitte überprüfen Sie diese Antwort
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 habenquelle
Es berechnet die Distanz-Bildlaufleiste zum unteren Rand des Elements. Gleich 0, wenn die Bildlaufleiste unten angekommen ist.
quelle
Das sind meine zwei Cent:
quelle
$(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight
=>$(this).scrollTop() + $(this).outerHeight(true) >= $(this)[0].scrollHeight
Pure JS mit Cross-Browser und Debouncing (Ziemlich gute Leistung )
Demo: http://jsbin.com/geherovena/edit?js,output
PS:
Debouncer
,getScrollXY
,getDocHeight
nicht von mir geschriebenIch zeige nur, wie es funktioniert und wie ich es machen werde
quelle
Meine Lösung in einfachen js:
quelle
Versuchen Sie dies für die Übereinstimmungsbedingung, wenn Sie zum unteren Ende scrollen
quelle
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.
quelle
Sie können den folgenden Code ausprobieren:
quelle
Dies liefert genaue Ergebnisse, wenn ein scrollbares Element überprüft wird (dh nicht
window
):offsetHeight
sollte die tatsächlich sichtbare Höhe eines Elements (einschließlich Polsterung, Rand und Bildlaufleisten) angeben undscrollHeight
ist 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üroffsetHeight
über seine Cross-Browser - Unterstützung ist unklar. Um mehr Optionen abzudecken, ist dies vollständiger:quelle
Math.floor(element.scrollTop) === element.scrollHeight - element.offsetHeight
falls das scrollTop eine Dezimalzahl ist, ohne die es nicht funktioniertMath.floor()
Alle diese Lösungen funktionieren bei Firefox und Chrome nicht, daher verwende ich benutzerdefinierte Funktionen von Miles O'Keefe und meder omuraliev wie folgt :
quelle
Hier sind meine zwei Cent, da die akzeptierte Antwort bei mir nicht funktioniert hat.
quelle
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 .
quelle
.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.Lassen Sie mich ohne JQuery Ansatz zeigen. Einfache JS-Funktion:
Kurzes Beispiel zur Verwendung:
quelle
Ich habe @ddanone answear verwendet und Ajax call hinzugefügt.
}}
quelle
Um die wiederholte Benachrichtigung über Nicks Antwort zu stoppen
quelle
Google Chrome gibt die volle Höhe der Seite an, wenn Sie anrufen
$(window).height()
Verwenden Sie stattdessen, um
window.innerHeight
die Höhe Ihres Fensters abzurufen. Notwendige Prüfung sollte sein:quelle
Anscheinend funktionierte für mich "Körper" und nicht "Fenster" wie folgt:
Für die browserübergreifende Kompatibilität verwenden Sie:
und dann anstelle von $ (document) .height () die Funktion getheight () aufrufen
für den bodennahen Gebrauch:
quelle