← Tutti gli articoli

Tutorial

Auto-pager — scroll infinito su qualsiasi pagina

15 maggio 2026 · di JustZix Team

Un forum, un archivio di blog, risultati di ricerca — contenuto diviso su 40 pagine con un link «Avanti» in fondo. Clic, attesa, clic, attesa. L'auto-pager lo fa per te: quando arrivi in fondo, la regola recupera la pagina successiva e accoda il suo contenuto. Scroll infinito su una pagina che non ce l'ha.

L'idea

Ogni pagina paginata ha due cose: un link «avanti» (spesso <a rel="next">) e un contenitore con il contenuto vero. L'auto-pager:

1. Rileva che hai scrollato vicino al fondo.
2. Recupera l'HTML della pagina successiva tramite fetch.
3. Estrae il contenitore del contenuto e accoda i suoi figli a quello corrente.
4. Sostituisce il link «avanti» con quello della nuova pagina — e ripete.

La regola

Il JavaScript della regola — adatta i due selettori in alto al sito specifico:

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

Due selettori da regolare

• NEXT — il link alla pagina successiva. a[rel="next"] funziona sorprendentemente spesso; in caso contrario, usa la classe del pulsante, es. .pagination-next.
• LIST — il contenitore con il contenuto che accodi. In un forum è la lista dei post, nei risultati è la lista dei risultati. Controlla nella JS Console di JustZix qual è il loro genitore comune.

Come funziona

Rilevare il fondo

innerHeight + scrollY è la posizione del bordo inferiore della finestra nel documento. Quando si avvicina a document.body.offsetHeight (con un margine di 1200 px), è ora di tirarne giù altro.

Il blocco loading

L'evento scroll si attiva decine di volte al secondo. Il flag loading garantisce che un fetch alla volta venga eseguito — senza, accoderesti la stessa pagina venti volte.

DOMParser

fetch restituisce HTML grezzo come testo. DOMParser lo trasforma in un documento interrogabile, da cui querySelector estrae solo il contenitore del contenuto — senza header, footer e menu della nuova pagina.

Trappole

• Contenuto renderizzato da JavaScript. Se la pagina renderizza la lista solo in JS, l'HTML grezzo da fetch sarà vuoto. L'auto-pager funziona su pagine renderizzate lato server.
• Gli script non vengono eseguiti. L'HTML accodato è DOM statico — uno <script> dalla nuova pagina non si attiva. Per il contenuto (testo, link, immagini) non è un problema.
• Il documento cresce. Dopo 30 pagine accodate il DOM è pesante. È il prezzo dello scroll infinito — ricarica la pagina ogni tanto.

Vedi anche

• Esempi — lo snippet auto-pager pronto da incollare
• Iniezione e CSP — quando fetch incontra restrizioni
• Output Console — osserva cosa fa la regola

Installa JustZix — e scrolla invece di cliccare «Avanti».