JavaScript Academy · Lektion

Unendliches Scrollen

Laden Sie weitere Inhalte, während der Benutzer scrollt.

Unendliches Scrollen ist eine kostenlose JavaScript 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 JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist unendliches Scrollen?

Beim unendlichen Scrollen werden automatisch weitere Inhalte geladen, sobald sich die Nutzerin oder der Nutzer dem Ende einer Liste nähert, anstatt einen Klick auf „Nächste Seite“ zu erfordern. Soziale Feeds und Suchergebnisse verwenden dieses Muster häufig.

Das Sentinel-Muster

Die übersichtlichste Technik verwendet ein Sentinel: ein leeres Element am Ende der Liste. Sobald das Sentinel im sichtbaren Bereich erscheint, rufen Sie den nächsten Datenblock ab und fügen ihn an.

// Markup pattern:
// <ul id="feed"> ...items... </ul>
// <div id="sentinel"></div>  <!-- trigger element -->

Das Sentinel beobachten

Richten Sie einen Intersection Observer auf das Sentinel. Da es hinter dem letzten Eintrag steht, bedeutet seine Sichtbarkeit, dass die Nutzerin oder der Nutzer das Ende erreicht hat.

const sentinel = document.getElementById('sentinel');
const observer = new IntersectionObserver(onIntersect, {
  rootMargin: '200px' // load a bit early
});
observer.observe(sentinel);

Das Laden auslösen

Prüfen Sie im Callback isIntersecting. Wenn der Wert true ist, laden Sie die nächste Datenseite.

function onIntersect(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreItems();
    }
  });
}

Die Seite verfolgen

Führen Sie einen Seitenzähler, damit jeder Ladevorgang den nächsten Abschnitt abruft. Erhöhen Sie ihn nach einem erfolgreichen Abruf.

let page = 1;

async function loadMoreItems() {
  const items = await fetchPage(page);
  appendItems(items);
  page++;
}

Doppelte Ladevorgänge verhindern

Der Callback kann wiederholt ausgelöst werden. Verwenden Sie ein loading-Flag, damit kein neuer Abruf beginnt, während bereits einer läuft.

let loading = false;

async function loadMoreItems() {
  if (loading) return;
  loading = true;
  const items = await fetchPage(page);
  appendItems(items);
  page++;
  loading = false;
}

Neue Einträge anhängen

Fügen Sie die abgerufenen Einträge vor dem Sentinel ein, damit es am Ende der wachsenden Liste bleibt und den nächsten Ladevorgang auslösen kann.

function appendItems(items) {
  const feed = document.getElementById('feed');
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.title;
    feed.appendChild(li);
  });
}

Am Ende anhalten

Wenn der Server keine weiteren Daten zurückgibt, trennen Sie die Verbindung des Observers, damit er nicht weiter versucht zu laden. So verhindern Sie endlose leere Anfragen.

const items = await fetchPage(page);
if (items.length === 0) {
  observer.disconnect(); // no more data
  return;
}

Warum rootMargin hilft

Ein großzügiger Wert für rootMargin, etwa 200px, beginnt mit dem Laden, bevor die Nutzerin oder der Nutzer tatsächlich das Ende erreicht. Dadurch erscheinen neue Einträge nahtlos und ohne sichtbare Pause.

new IntersectionObserver(onIntersect, {
  rootMargin: '300px' // begin loading well before the end
});

Hinweise zur Barrierefreiheit

Unendliches Scrollen kann Tastatur- und Screenreader-Nutzende in einer Falle festhalten und die Fußzeile verbergen. Erwägen Sie als Fallback eine manuelle Schaltfläche „Weitere laden“ und kündigen Sie neue Inhalte mithilfe von ARIA-Live-Regionen auf unaufdringliche Weise an.

Der vollständige Ablauf

Unendliches Scrollen mit dem Intersection Observer: Platzieren Sie ein Sentinel, beobachten Sie es, laden Sie Daten und hängen Sie sie an, sobald es erscheint, verhindern Sie doppelte Ladevorgänge und trennen Sie die Verbindung, wenn keine Daten mehr vorhanden sind. Keine Berechnungen von Scrollpositionen erforderlich.

Schnelltest

Testen Sie Ihr Verständnis des unendlichen Scrollens.

Zusammenfassung

Sie haben unendliches Scrollen implementiert:

Platzieren Sie ein Sentinel-Element hinter der Liste.
Beobachten Sie es mit einem Intersection Observer.
Rufen Sie bei einer Überschneidung die nächste Seite ab und hängen Sie sie an.
Verwenden Sie ein loading-Flag, um doppelte Abrufe zu vermeiden.
Trennen Sie die Verbindung, wenn keine Daten mehr vorhanden sind.

Als Nächstes geht es um durch Scrollen ausgelöste Animationen.

Häufig gestellte Fragen

Ist die Lektion „Unendliches Scrollen“ kostenlos?

Ja — der vollständige Text von „Unendliches Scrollen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Unendliches Scrollen“?

Laden Sie weitere Inhalte, während der Benutzer scrollt. Du übst JavaScript 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 JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript 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 „Unendliches Scrollen“?

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 JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript 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

← Zurück zu JavaScript Academy