← Tous les articles

Tutoriels

Auto-pager — défilement infini sur n'importe quelle page

15 mai 2026 · par JustZix Team

Un forum, une archive de blog, des résultats de recherche — du contenu réparti sur 40 pages avec un lien « Suivant » en bas. Clic, attente, clic, attente. L'auto-pager le fait pour vous : quand vous atteignez le bas, la règle récupère la page suivante et ajoute son contenu. Du défilement infini sur une page qui ne l'a pas.

L'idée

Chaque page paginée a deux choses : un lien « suivant » (souvent <a rel="next">) et un conteneur avec le contenu réel. L'auto-pager :

1. Détecte que vous avez scrollé près du bas.
2. Récupère le HTML de la page suivante via fetch.
3. Extrait le conteneur de contenu et ajoute ses enfants à celui en cours.
4. Remplace le lien « suivant » par celui de la nouvelle page — et recommence.

La règle

Le JavaScript de la règle — ajustez les deux sélecteurs en haut au site précis :

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

Deux sélecteurs à ajuster

• NEXT — le lien vers la page suivante. a[rel="next"] marche étonnamment souvent ; sinon, utilisez la classe du bouton, p. ex. .pagination-next.
• LIST — le conteneur avec le contenu que vous ajoutez. Sur un forum c'est la liste des posts, dans les résultats c'est la liste des résultats. Vérifiez dans la JS Console de JustZix quel est leur parent commun.

Comment ça marche

Détecter le bas

innerHeight + scrollY est la position du bord inférieur de la fenêtre dans le document. Quand elle approche de document.body.offsetHeight (avec une marge de 1200 px), il est temps d'en tirer plus.

Le verrou loading

L'événement scroll se déclenche des dizaines de fois par seconde. Le drapeau loading garantit qu'un seul fetch s'exécute à la fois — sans lui, vous ajouteriez la même page vingt fois.

DOMParser

fetch renvoie du HTML brut sous forme de texte. DOMParser le transforme en un document interrogeable, dont querySelector ne tire que le conteneur de contenu — sans l'en-tête, le pied de page et le menu de la nouvelle page.

Pièges

• Contenu rendu par JavaScript. Si la page ne rend la liste qu'en JS, le HTML brut de fetch sera vide. L'auto-pager fonctionne sur les pages rendues côté serveur.
• Les scripts ne s'exécutent pas. Le HTML ajouté est du DOM statique — un <script> de la nouvelle page ne se déclenchera pas. Pour le contenu (texte, liens, images), ce n'est pas un problème.
• Le document grossit. Après 30 pages ajoutées, le DOM est lourd. C'est le prix du défilement infini — rechargez la page de temps en temps.

À voir aussi

• Exemples — le snippet auto-pager prêt à coller
• Injection et CSP — quand fetch rencontre des restrictions
• Output Console — observez ce que fait la règle

Installez JustZix — et scrollez au lieu de cliquer « Suivant ».