Desplazamiento infinito
Cargue más contenido a medida que el usuario se desplaza.
Desplazamiento infinito es una lección gratuita de JavaScript 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 JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué es el desplazamiento infinito?
El desplazamiento infinito carga más contenido automáticamente cuando el usuario se acerca al final de una lista, en lugar de exigirle que haga clic en Página siguiente. Es habitual en feeds de redes sociales y resultados de búsqueda.
El patrón del centinela
La técnica más clara utiliza un centinela: un elemento vacío colocado al final de la lista. Cuando el centinela entra en la ventana gráfica, obtiene y añade el siguiente lote.
// Markup pattern:
// <ul id="feed"> ...items... </ul>
// <div id="sentinel"></div> <!-- trigger element -->Observar el centinela
Configure un Intersection Observer para observar el centinela. Como está situado después del último elemento, su visibilidad indica que el usuario ha llegado al final.
const sentinel = document.getElementById('sentinel');
const observer = new IntersectionObserver(onIntersect, {
rootMargin: '200px' // load a bit early
});
observer.observe(sentinel);Activar una carga
En el callback, compruebe isIntersecting. Cuando sea true, cargue la página siguiente de datos.
function onIntersect(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadMoreItems();
}
});
}Controlar la página
Mantenga un contador de páginas para que cada carga obtenga el siguiente bloque. Increméntelo después de obtener los datos correctamente.
let page = 1;
async function loadMoreItems() {
const items = await fetchPage(page);
appendItems(items);
page++;
}Evitar cargas duplicadas
El callback puede ejecutarse repetidamente. Use una bandera loading para que no se inicie una nueva obtención mientras haya otra en curso.
let loading = false;
async function loadMoreItems() {
if (loading) return;
loading = true;
const items = await fetchPage(page);
appendItems(items);
page++;
loading = false;
}Añadir elementos nuevos
Añada los elementos obtenidos antes del centinela para que este permanezca al final de la lista en crecimiento, listo para activar la siguiente carga.
function appendItems(items) {
const feed = document.getElementById('feed');
items.forEach(item => {
const li = document.createElement('li');
li.textContent = item.title;
feed.appendChild(li);
});
}Detenerse al final
Cuando el servidor no devuelva más datos, desconecte el observador para que deje de intentar cargar. Esto evita solicitudes vacías interminables.
const items = await fetchPage(page);
if (items.length === 0) {
observer.disconnect(); // no more data
return;
}Por qué rootMargin ayuda
Un rootMargin amplio, como 200px, inicia la carga antes de que el usuario llegue realmente al final, de modo que los elementos nuevos aparecen sin interrupciones y sin una pausa visible.
new IntersectionObserver(onIntersect, {
rootMargin: '300px' // begin loading well before the end
});Notas de accesibilidad
El desplazamiento infinito puede atrapar a los usuarios de teclado y de lectores de pantalla, además de ocultar el pie de página. Considere un botón manual Cargar más como alternativa y anuncie el contenido nuevo de forma adecuada mediante regiones activas de ARIA.
El flujo completo
Desplazamiento infinito con Intersection Observer: coloque un centinela, obsérvelo, cargue y añada los datos cuando aparezca, evite las cargas duplicadas y desconecte el observador cuando se agoten los datos. No hace falta calcular el desplazamiento.
Comprobación rápida
Compruebe su comprensión del desplazamiento infinito.
Resumen
Ha creado el desplazamiento infinito:
- Coloque un elemento centinela después de la lista.
- Obsérvelo con un Intersection Observer.
- Cuando se produzca la intersección, obtenga y añada la página siguiente.
- Use una bandera
loadingpara evitar obtenciones duplicadas. - Desconecte el observador cuando se agoten los datos.
A continuación, crearemos animaciones activadas por el desplazamiento.
Preguntas frecuentes
¿La lección «Desplazamiento infinito» es gratis?
Sí — el texto completo de «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 JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Desplazamiento infinito»?
Cargue más contenido a medida que el usuario se desplaza. Practicas JavaScript 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 JavaScript Academy?
No se requiere experiencia previa. JavaScript 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 «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 JavaScript Academy?
Sí. Cada lección de JavaScript 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
- Observación de la visibilidad de elementos
- Carga diferida de imágenes
- Desplazamiento infinito
- Animaciones activadas por desplazamiento