← Todos los artículos

Tutoriales

Auto-pager — scroll infinito en cualquier página

15 mayo 2026 · por JustZix Team

Un foro, un archivo de blog, resultados de búsqueda — contenido dividido en 40 páginas con un enlace «Siguiente» al fondo. Clic, espera, clic, espera. El auto-pager lo hace por ti: cuando llegas al fondo, la regla recupera la página siguiente y añade su contenido. Scroll infinito en una página que no lo tiene.

La idea

Cada página paginada tiene dos cosas: un enlace «siguiente» (a menudo <a rel="next">) y un contenedor con el contenido real. El auto-pager:

1. Detecta que has hecho scroll cerca del fondo.
2. Recupera el HTML de la página siguiente mediante fetch.
3. Extrae el contenedor del contenido y añade sus hijos al actual.
4. Sustituye el enlace «siguiente» por el de la nueva página — y repite.

La regla

El JavaScript de la regla — adapta los dos selectores de arriba al sitio específico:

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

Dos selectores que ajustar

• NEXT — el enlace a la página siguiente. a[rel="next"] funciona sorprendentemente a menudo; si no, usa la clase del botón, p. ej. .pagination-next.
• LIST — el contenedor con el contenido que añades. En un foro es la lista de los posts, en los resultados es la lista de los resultados. Comprueba en la JS Console de JustZix cuál es su padre común.

Cómo funciona

Detectar el fondo

innerHeight + scrollY es la posición del borde inferior de la ventana en el documento. Cuando se acerca a document.body.offsetHeight (con un margen de 1200 px), es hora de bajar más.

El bloqueo loading

El evento scroll se dispara decenas de veces por segundo. El flag loading garantiza que un fetch a la vez se ejecute — sin él, añadirías la misma página veinte veces.

DOMParser

fetch devuelve HTML en bruto como texto. DOMParser lo transforma en un documento consultable, del que querySelector extrae solo el contenedor del contenido — sin header, footer y menú de la nueva página.

Trampas

• Contenido renderizado por JavaScript. Si la página renderiza la lista solo en JS, el HTML en bruto de fetch estará vacío. El auto-pager funciona en páginas renderizadas del lado del servidor.
• Los scripts no se ejecutan. El HTML añadido es DOM estático — un <script> de la nueva página no se dispara. Para el contenido (texto, enlaces, imágenes) no es un problema.
• El documento crece. Tras 30 páginas añadidas el DOM es pesado. Es el precio del scroll infinito — recarga la página de vez en cuando.

Mira también

• Ejemplos — el snippet auto-pager listo para pegar
• Inyección y CSP — cuándo fetch encuentra restricciones
• Output Console — observa qué hace la regla

Instala JustZix — y haz scroll en lugar de pulsar «Siguiente».