← Alle Beiträge

Anleitungen

Auto-Pager — Infinite Scroll auf jeder Seite

15 Mai 2026 · von JustZix Team

Ein Forum, ein Blog-Archiv, Suchergebnisse — Inhalt über 40 Seiten verteilt mit einem „Weiter"-Link unten. Klick, warten, Klick, warten. Der Auto-Pager macht es für dich: Wenn du unten ankommst, holt die Regel die nächste Seite und hängt ihren Inhalt an. Infinite Scroll auf einer Seite, die es nicht hat.

Die Idee

Jede paginierte Seite hat zwei Dinge: einen „Weiter"-Link (oft <a rel="next">) und einen Container mit dem eigentlichen Inhalt. Der Auto-Pager:

1. Erkennt, dass du nahe ans Ende gescrollt hast.
2. Holt das HTML der nächsten Seite per fetch.
3. Extrahiert den Inhalts-Container und hängt seine Kinder an den aktuellen an.
4. Tauscht den „Weiter"-Link gegen den von der neuen Seite — und wiederholt.

Die Regel

Das JavaScript der Regel — passe die zwei Selektoren oben an die konkrete Seite an:

const NEXT = 'a[rel="next"]';
const LIST = '#content';
let loading = false;
addEventListener('scroll', async () => {
  if (loading || !document.querySelector(NEXT)) return;
  if (innerHeight + scrollY < document.body.offsetHeight - 1200) return;
  loading = true;
  const next = document.querySelector(NEXT);
  const html = await fetch(next.href).then(r => r.text());
  const doc = new DOMParser().parseFromString(html, 'text/html');
  const more = doc.querySelector(LIST);
  if (more) document.querySelector(LIST).append(...more.childNodes);
  const nn = doc.querySelector(NEXT);
  nn ? (next.href = nn.href) : next.remove();
  loading = false;
});

Zwei Selektoren zum Anpassen

• NEXT — der Link zur nächsten Seite. a[rel="next"] funktioniert überraschend oft; falls nicht, nimm die Klasse des Buttons, z. B. .pagination-next.
• LIST — der Container mit dem Inhalt, den du anhängst. In einem Forum ist es die Beitragsliste, in Ergebnissen die Ergebnisliste. Prüfe in der JustZix JS Console, was ihr gemeinsamer Elternknoten ist.

Wie es funktioniert

Das Ende erkennen

innerHeight + scrollY ist die Position der unteren Fensterkante im Dokument. Wenn sie sich document.body.offsetHeight nähert (mit 1200 px Spielraum), ist es Zeit, mehr nachzuziehen.

Die loading-Sperre

Das scroll-Event feuert Dutzende Male pro Sekunde. Das loading-Flag garantiert, dass ein fetch auf einmal läuft — ohne es würdest du dieselbe Seite zwanzigmal anhängen.

DOMParser

fetch liefert rohes HTML als Text. DOMParser verwandelt es in ein abfragbares Dokument, aus dem querySelector nur den Inhalts-Container zieht — ohne Header, Footer und Menü der neuen Seite.

Fallstricke

• JavaScript-gerenderter Inhalt. Wenn die Seite die Liste erst in JS rendert, ist das rohe HTML aus fetch leer. Der Auto-Pager funktioniert auf serverseitig gerenderten Seiten.
• Skripte laufen nicht. Angehängtes HTML ist statisches DOM — ein <script> von der neuen Seite feuert nicht. Für Inhalt (Text, Links, Bilder) ist das kein Problem.
• Das Dokument wächst. Nach 30 angehängten Seiten ist das DOM schwer. Das ist der Preis von Infinite Scroll — lade die Seite ab und zu neu.

Siehe auch

• Beispiele — das Auto-Pager-Snippet zum Einfügen bereit
• Injektion und CSP — wenn fetch auf Beschränkungen trifft
• Output Console — sieh, was die Regel tut

Installiere JustZix — und scrolle, statt „Weiter" zu klicken.