← Wszystkie wpisy

Poradniki

Auto-pager — nieskończone przewijanie na dowolnej stronie

15 maja 2026 · autor JustZix Team

Forum, archiwum bloga, wyniki wyszukiwania — treść rozbita na 40 stron z „Następna" na dole. Klik, czekaj, klik, czekaj. Auto-pager robi to za Ciebie: gdy dojeżdżasz do końca, reguła sama pobiera kolejną stronę i dokleja jej treść. Nieskończone przewijanie na stronie, która go nie ma.

Pomysł

Każda strona z paginacją ma dwie rzeczy: link „dalej" (często <a rel="next">) i kontener z właściwą treścią. Auto-pager:

1. Wykrywa, że doscrollowałeś blisko końca.
2. Pobiera HTML następnej strony przez fetch.
3. Wyciąga z niego kontener treści i dokleja jego dzieci do bieżącego.
4. Podmienia link „dalej" na ten z nowej strony — i tak w kółko.

Reguła

JavaScript reguły — dwa selektory na górze dostosuj do konkretnej strony:

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

Dwa selektory do dostrojenia

• NEXT — link do następnej strony. a[rel="next"] działa zaskakująco często; jak nie, użyj klasy przycisku, np. .pagination-next.
• LIST — kontener z treścią, którą doklejamy. Na forum to lista postów, w wynikach — lista wyników. Sprawdź w JS Console JustZix, co jest wspólnym rodzicem.

Jak to działa

Wykrycie końca

innerHeight + scrollY to pozycja dolnej krawędzi okna w dokumencie. Gdy zbliża się do document.body.offsetHeight (z zapasem 1200 px), czas dociągnąć więcej.

Blokada loading

Zdarzenie scroll sypie się dziesiątkami na sekundę. Flaga loading gwarantuje, że jeden fetch leci naraz — bez niej dokleiłbyś tę samą stronę dwadzieścia razy.

DOMParser

fetch zwraca surowy HTML jako tekst. DOMParser zamienia go w przeszukiwalny dokument, z którego querySelector wyciąga sam kontener treści — bez nagłówka, stopki i menu nowej strony.

Pułapki

• Treść z JavaScript. Jeśli strona renderuje listę dopiero w JS, surowy HTML z fetch będzie pusty. Auto-pager działa na stronach renderowanych serwerowo.
• Skrypty się nie wykonają. Doklejony HTML to statyczny DOM — <script> z nowej strony nie odpali. Dla treści (tekst, linki, obrazki) to nie problem.
• Dokument rośnie. Po 30 doklejonych stronach DOM jest ciężki. To cena infinite scrolla — od czasu do czasu odśwież stronę.

Zobacz też

• Przykłady — snippet auto-pagera gotowy do wklejenia
• Injekcja a CSP — gdy fetch napotyka ograniczenia
• Output Console — podejrzyj, co reguła robi

Zainstaluj JustZix — i przewijaj zamiast klikać „Następna".