Infinite-Scroll-Implementierung
Laden Sie automatisch weitere Inhalte, während der Benutzer scrollt
Infinite-Scroll-Implementierung ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Das Muster
Beim unendlichen Scrollen werden weitere Inhalte geladen, sobald sich der Benutzer dem Listenende nähert. Die sauberste Implementierung verwendet IntersectionObserver: Platzieren Sie ein „Sentinel“-Element am Ende der Liste und beobachten Sie es. Sobald der Sentinel in den Viewport gelangt, rufen Sie die nächste Seite ab.
Sentinel-Element
Fügen Sie nach dem letzten Listenelement ein unsichtbares <div> (oder einen „Wird geladen …“-Platzhalter) ein. Beobachten Sie es mit IntersectionObserver. Sobald es sich mit dem Viewport überschneidet, signalisiert das, dass der Benutzer bis nahe an das Listenende gescrollt hat – Zeit, weitere Inhalte abzurufen.
<ul id="feed">
<li>Post 1</li>
<li>Post 2</li>
</ul>
<div id="sentinel" aria-hidden="true"></div>Die Observer-Schleife
Bei einer Überschneidung rufen Sie die nächste Seite ab, rendern die neuen Elemente und positionieren den Sentinel neu. Wenn Sie die Elemente davor einfügen, bleibt er automatisch am Listenende. Ein Aufheben und erneutes Einrichten der Beobachtung ist nicht nötig – der Sentinel wird weiterhin beobachtet.
const sentinel = document.getElementById("sentinel");
const feed = document.getElementById("feed");
let page = 1;
let loading = false;
const observer = new IntersectionObserver(async (entries) => {
if (!entries[0].isIntersecting || loading) return;
loading = true;
const items = await fetchPage(page++);
items.forEach((it) => feed.insertAdjacentHTML("beforeend", renderItem(it)));
loading = false;
});
observer.observe(sentinel);Schutz durch den Ladestatus
Ein boolesches loading-Flag verhindert parallele Anfragen, wenn der Benutzer schnell scrollt und mehrere Überschneidungen auslöst, bevor die erste Antwort eintrifft. Ohne dieses Flag wird dieselbe Seite wiederholt abgerufen und Elemente erscheinen doppelt.
Ende der Daten
Wenn der Server eine leere Seite zurückgibt (oder „keine weiteren“ Inhalte signalisiert), heben Sie die Beobachtung des Sentinels auf und ersetzen Sie ihn durch eine Meldung zum Listenende. Zukünftige Überschneidungen lösen dann keine Abrufe mehr aus, und der Benutzer sieht, dass das Ende erreicht ist.
Fehlerbehandlung
Umschließen Sie den fetch-Aufruf mit try/catch. Lassen Sie bei einem Fehler loading = true, damit nicht automatisch neue Versuche ausgelöst werden. Zeigen Sie stattdessen eine Schaltfläche „Erneut versuchen“, die loading zurücksetzt und das Laden erneut auslöst. Andernfalls können Netzwerkfehler zu einer Flut von Wiederholungsversuchen führen.
rootMargin zum frühzeitigen Laden
rootMargin: "500px" startet den nächsten Abruf 500 px, bevor der Benutzer den Sentinel erreicht. Stimmen Sie den Wert auf die Elementhöhe und die durchschnittliche Scrollgeschwindigkeit ab: Ist er zu klein, stößt der Benutzer auf „noch keine Inhalte“; ist er zu groß, laden Sie mehr voraus als nötig.
Wiederherstellung der Scrollposition
Wenn der Benutzer weg navigiert und zurückkehrt, sollte die Scrollposition erhalten bleiben und die zuvor geladenen Elemente erneut gerendert werden. Cachen Sie die Elemente in sessionStorage oder einem Store nach Art von Zustand; stellen Sie sie beim Mounten wieder her und rufen Sie scrollTo mit dem gemerkten Offset auf.
Überlegungen zum Speicherverbrauch
Bei langen Infinite-Scroll-Ansichten sammeln sich Tausende von DOM-Knoten an. Kombinieren Sie bei sehr langen Feeds (Twitter, Facebook) das Verfahren mit Windowing: Entfernen Sie Elemente oberhalb des Viewports aus dem DOM und stellen Sie sie beim Zurückscrollen wieder her. Bibliotheken wie react-virtual oder @tanstack/virtual erledigen das effizient.
Barrierefreiheit
Infinite Scrolling ist für Tastatur- und Screenreader-Benutzer problematisch, da sie einen Footer nur schwer erreichen. Bieten Sie als Fallback eine alternative Schaltfläche „Mehr laden“ an und stellen Sie sicher, dass die Seite einen echten Footer besitzt, der über die Tasten Home/End erreichbar ist. Eine Aria-live-Region, die neue Elemente ankündigt, ist ebenfalls hilfreich.
Bounce-Scrolling auf Mobilgeräten
Das Bounce-Scrolling unter iOS kann in der Nähe des Listenendes mehrmals Überschneidungen auslösen. Der Ladestatus-Schutz deckt die meisten Fälle ab. Zusätzlich können Sie mit 300 ms entprellen, um die während des Zurückfederns auftretende Folge von Überschneidungen herauszufiltern.
Alternative: Cursor-basierte Paginierung
Server-APIs sollten einen „next cursor“ zurückgeben, statt sich auf vom Client verwaltete Seitenzahlen zu verlassen. Das ist robust gegenüber dem Einfügen und Löschen von Elementen während des Scrollens. Der Client übergibt den Cursor bei jeder Anfrage und beendet den Vorgang, sobald der Server keinen Cursor zurückgibt.
Wissenscheck
Warum ist ein "loading"-Flag in einem IntersectionObserver-Callback für Infinite Scrolling erforderlich?
Zusammenfassung
Infinite Scrolling verwendet einen IntersectionObserver für ein Sentinel-Element am Ende der Liste. Sobald es zu einer Überschneidung kommt, rufen Sie die nächste Seite ab, rendern Sie sie und beobachten Sie das Element weiter. Sichern Sie den Ablauf mit einem loading-Flag ab, behandeln Sie das Ende der Daten und Fehler zuverlässig und passen Sie rootMargin an die gewünschte Prefetch-Distanz an. Stellen Sie Tastatur-Alternativen bereit, etwa eine "Mehr laden"-Schaltfläche, und ziehen Sie für sehr lange Feeds Windowing in Betracht.
Häufig gestellte Fragen
Ist die Lektion „Infinite-Scroll-Implementierung“ kostenlos?
Ja — der vollständige Text von „Infinite-Scroll-Implementierung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Infinite-Scroll-Implementierung“?
Laden Sie automatisch weitere Inhalte, während der Benutzer scrollt Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Infinite-Scroll-Implementierung“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- IntersectionObserver API und Schwellenwerte
- Lazy Loading mit IntersectionObserver
- Infinite-Scroll-Implementierung
- Scroll-gekoppelte Animationen einrichten