Implementación del desplazamiento infinito
Cargue automáticamente más contenido mientras el usuario se desplaza
Implementación del desplazamiento infinito es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
El patrón
El desplazamiento infinito carga más contenido a medida que el usuario se acerca al final de la lista. La implementación más limpia utiliza IntersectionObserver: coloque un elemento «sentinel» al final de la lista y obsérvelo. Cuando el sentinel entre en la ventana gráfica, obtenga la página siguiente.
Elemento sentinel
Añada un <div> invisible (o un placeholder «loading...») después del último elemento de la lista. Obsérvelo con IntersectionObserver. Cuando se produzca la intersección, significa que el usuario se ha desplazado cerca del final; es el momento de obtener más contenido.
<ul id="feed">
<li>Post 1</li>
<li>Post 2</li>
</ul>
<div id="sentinel" aria-hidden="true"></div>Bucle del observador
Cuando se produzca la intersección, obtenga la página siguiente, renderice los elementos nuevos y vuelva a colocar el sentinel (permanecerá automáticamente al final de la lista si añade elementos delante de él). No es necesario dejar de observarlo y volver a observarlo: el sentinel sigue observado.
const sentinel = document.getElementById("sentinel");
const feed = document.getElementById("feed");
let page = 1;
let loading = false;
const observer = new IntersectionObserver(async (entries) => {
if (!entries[0].isIntersecting || loading) return;
loading = true;
const items = await fetchPage(page++);
items.forEach((it) => feed.insertAdjacentHTML("beforeend", renderItem(it)));
loading = false;
});
observer.observe(sentinel);Protección del estado de carga
Un indicador booleano loading evita acumular solicitudes si el usuario se desplaza rápidamente y provoca varias intersecciones antes de que llegue la primera respuesta. Sin él, la misma página se obtiene repetidamente y los elementos aparecen duplicados.
Fin de los datos
Cuando el servidor devuelve una página vacía (o indica que «no hay más»), deje de observar el sentinel y sustitúyalo por un mensaje de fin de lista. Las intersecciones posteriores no activarán nuevas solicitudes y el usuario verá que ha llegado al final.
Gestión de errores
Incluya fetch en un bloque try/catch. Si se produce un error, deje loading = true para que los reintentos no se ejecuten automáticamente; muestre un botón «Reintentar» que restablezca loading y vuelva a activar la carga. De lo contrario, los fallos de red pueden provocar una avalancha de reintentos.
rootMargin para la carga anticipada
rootMargin: "500px" inicia la siguiente solicitud 500 px antes de que el usuario llegue al sentinel. Ajuste el valor según la altura de los elementos y la velocidad media de desplazamiento: si es demasiado pequeño, los usuarios llegarán a «todavía no hay contenido»; si es demasiado grande, cargará contenido antes de que sea necesario.
Restauración de la posición de desplazamiento
Cuando el usuario navega a otra página y vuelve, debe conservarse la posición de desplazamiento y deben volver a renderizarse los elementos cargados anteriormente. Almacene los elementos en sessionStorage o en un store de estilo Zustand; restáurelos al montar el componente y use scrollTo con el desplazamiento recordado.
Consideraciones de memoria
Los desplazamientos infinitos largos acumulan miles de nodos DOM. Para feeds muy extensos (Twitter o Facebook), combínelos con windowing: elimine del DOM los elementos que queden por encima de la ventana gráfica y restáurelos al desplazarse hacia arriba. Bibliotecas como react-virtual y @tanstack/virtual lo gestionan de forma eficiente.
Accesibilidad
El desplazamiento infinito dificulta el uso a las personas con teclado y lectores de pantalla, que no pueden llegar fácilmente al pie de página. Proporcione como alternativa un botón «Cargar más» y asegúrese de que la página tenga un pie de página real accesible mediante las teclas Home/End. También resulta útil una región aria-live que anuncie los elementos nuevos.
Rebote del desplazamiento en móviles
El desplazamiento con rebote de iOS puede producir varias intersecciones cerca del final. La protección de carga gestiona la mayoría de los casos; también puede aplicar un debounce de 300 ms para filtrar la ráfaga de intersecciones durante el rebote.
Alternativa: paginación basada en cursores
Las API del servidor deberían devolver un «next cursor» en lugar de depender de números de página controlados por el cliente, ya que así son resistentes a inserciones y eliminaciones de elementos durante el desplazamiento. El cliente envía el cursor en cada solicitud y se detiene cuando el servidor no devuelve ninguno.
Comprobación de conocimientos
¿Por qué es necesaria una bandera de "loading" en una función de callback de IntersectionObserver para el desplazamiento infinito?
Resumen
El desplazamiento infinito utiliza un IntersectionObserver en un elemento centinela al final de la lista. Cuando se produce la intersección, obtenga la página siguiente, renderícela y mantenga la observación activa. Use un indicador de carga, gestione correctamente el final de los datos y los errores, y ajuste rootMargin para controlar la distancia de precarga. Proporcione alternativas de teclado, como un botón «Cargar más», y considere el uso de windowing para feeds muy largos.
Preguntas frecuentes
¿La lección «Implementación del desplazamiento infinito» es gratis?
Sí — el texto completo de «Implementación del desplazamiento infinito» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Implementación del desplazamiento infinito»?
Cargue automáticamente más contenido mientras el usuario se desplaza Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Implementación del desplazamiento infinito»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- API IntersectionObserver y umbrales
- Carga diferida con IntersectionObserver
- Implementación del desplazamiento infinito
- Configuración de animaciones vinculadas al desplazamiento