El desplazamiento infinito es una técnica popular utilizada en sitios web para mejorar el compromiso de los usuarios cargando continuamente nuevos contenidos a medida que el usuario desplaza hacia abajo la página. Este enfoque mantiene a los visitantes comprometidos más tiempo y proporciona una experiencia de navegación perfecta. Implementar desplazamiento infinito con JavaScript es sencillo y puede ser personalizado para adaptarse a diversas necesidades del sitio web, desde las redes sociales hasta los listados de productos de comercio electrónico. En este artículo, exploraremos el por qué, cómo y mejores prácticas de desplazamiento infinito, completa con la consideración

¿Por qué usar el infinito escroto?

Infinite desplazador ofrece varios beneficios que impactan directamente el compromiso del usuario y el rendimiento del sitio:

  • Reduce la necesidad de paginación: Al eliminar las recargas de página y los clics manuales, la navegación se vuelve más suave e intuitiva. Los usuarios pueden explorar contenido sin interrupciones.
  • Encoura el descubrimiento de contenido: Como nuevos artículos se cargan automáticamente, los visitantes tienen más probabilidades de ver artículos, productos o publicaciones adicionales que podrían perder.
  • Metrices de compromiso de usuario: El tiempo en página, páginas por sesión y profundidad de desplazamiento aumenta a menudo porque se mantiene el flujo natural de navegación.
  • Provee una experiencia de usuario moderna y dinámica: Muchas plataformas populares como Twitter, Pinterest e Instagram usan un pergamino infinito para crear una sensación de aplicación en la web.

Sin embargo, el desplazamiento infinito no es adecuado para cada contexto. Los sitios donde los usuarios necesitan encontrar elementos específicos rápidamente (por ejemplo, listados de directorios o resultados de búsqueda) pueden beneficiarse de la paginación clásica con un pie o botón "Más de carga". La decisión debe basarse en la intención del usuario y la estructura de contenido.

Implementación básica de la tracción infinita

La implementación de un desplazamiento infinito básico implica escuchar el evento y añadir nuevos contenidos cuando el usuario se acerca al fondo de la página. A continuación se muestra una guía paso a paso para construir una versión sencilla.

Estructura HTML

Configure un elemento contenedor que contenga el contenido inicial. Todos los nuevos artículos serán enviados aquí.

<div id="content">
 <!-- Existing items loaded on page load -->
 <div class="item">Item 1</div>
 <div class="item">Item 2</div>
 <div class="item">Item 3</div>
</div>
<div id="loading-indicator" style="display:none;">Loading more content...</div>

Ejemplo de JavaScript

Usando el evento de desplazamiento, detectamos cuando el usuario ha desplazado cerca de la parte inferior de la página. El umbral () impide que el disparador se dispare demasiado tarde.

const contentDiv = document.getElementById('content');
const loadingIndicator = document.getElementById('loading-indicator');
let isLoading = false; // Prevent duplicate requests

window.addEventListener('scroll', () => {
 const scrollPosition = window.innerHeight + window.scrollY;
 const documentHeight = document.body.offsetHeight;

 if (scrollPosition >= documentHeight - 200 && !isLoading) {
 loadMoreContent();
 }
});

async function loadMoreContent() {
 isLoading = true;
 loadingIndicator.style.display = 'block';

 try {
 // Simulate fetching new content from server
 const newItem = document.createElement('div');
 newItem.className = 'item';
 newItem.textContent = `New item loaded at ${new Date().toLocaleTimeString()}`;
 contentDiv.appendChild(newItem);
 } finally {
 isLoading = false;
 loadingIndicator.style.display = 'none';
 }
}

Mejora de la aplicación

Para un desplazamiento infinito, el rendimiento y la experiencia del usuario deben ser refinados.

Debouncing the Scroll Event

El evento de desplazamiento crudo se dispara rápidamente, que puede degradar el rendimiento. Usando una función de desprestigio asegura que el cheque se ejecuta sólo después de una breve pausa en el desplazamiento.

function debounce(func, wait) {
 let timeout;
 return function executedFunction(...args) {
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(this, args), wait);
 };
}

window.addEventListener('scroll', debounce(checkScrollPosition, 100));

Utilizando la API de Observador de Intersección

Un enfoque más eficiente y moderno es el Observador de Intersección. Monitoriza un elemento centinela situado en la parte inferior del contenido y dispara una llamada cuando se hace visible.

const sentinel = document.createElement('div');
sentinel.id = 'scroll-sentinel';
contentDiv.after(sentinel);

const observer = new IntersectionObserver((entries) => {
 if (entries[0].isIntersecting && !isLoading) {
 loadMoreContent();
 }
});
observer.observe(sentinel);

Esto elimina la necesidad de adjuntar un pergamino oyente y es significativamente más ligero en el hilo principal.

Manejo de fin de contenido con gratitud

Cuando no hay más datos, el pergamino infinito debe dejar de intentar cargar. Una bandera simple o una respuesta del servidor con una propiedad puede controlar esto.

let hasMoreContent = true;

async function loadMoreContent() {
 if (!hasMoreContent) return;
 // ... fetch data
 if (response.data.length === 0) hasMoreContent = false;
}

Cargando datos reales con AJAX

Para hacer dinámica de desplazamiento infinito, debe buscar datos de un servidor usando AJAX. La API de Fetch es el estándar moderno.

Ejemplo de API de Fetch

Este ejemplo asume que su servidor proporciona datos JSON con paginas con una URL o un parámetro número de página.

const contentUrl = '/api/items?page=1';
let currentPage = 1;

async function loadMoreContent() {
 isLoading = true;
 loadingIndicator.style.display = 'block';

 try {
 const response = await fetch(`/api/items?page=${++currentPage}`);
 if (!response.ok) throw new Error('Network error');
 const data = await response.json();

 data.items.forEach(item => {
 const el = document.createElement('div');
 el.className = 'item';
 el.textContent = item.title;
 contentDiv.appendChild(el);
 });

 // If the server indicates no more data, disable loading
 if (data.is_last_page) hasMoreContent = false;
 } catch (error) {
 console.error('Failed to load content:', error);
 } finally {
 isLoading = false;
 loadingIndicator.style.display = 'none';
 }
}

Manejo de respuestas y errores del servidor

Siempre incluye un manejo de errores robusto. Mostrar una opción de reingreso si el fetch falla, y evitar los bucles de carga infinitas limitando los retries. Para una mejor experiencia de usuario, muestra un mensaje "Algo salió mal" con un botón "Intentar de nuevo".

Mejoras de la experiencia de usuario

Smooth UX es crítico para retener a los usuarios. Aquí hay varias mejoras a considerar.

Indicadores de carga

Utilice una barra de spinner, progreso o pantallas esqueleto para indicar que se está buscando más contenido. Esto asegura a los usuarios que el sitio está funcionando.

<div id="loading" class="loading-spinner"></div>

Las animaciones CSS para los spinners son ligeras. Para las pantallas esqueleto, crear bloques de marcador de posición que imitan la disposición final del contenido.

Consideraciones de accesibilidad

El desplazamiento infinito accesible requiere:

  • Gestión de los focos: Cuando se cargan nuevos elementos, anúntalos a los lectores de pantalla usando regiones.
  • Navegación de teclado:] Asegurar que los usuarios puedan atravesar contenido recién cargado a través del teclado (Tab). Evite el enfoque de captura.
  • Alternativo a desplazamiento infinito: Proporcionar un botón "Más carga" como un retroceso para los usuarios que prefieren el control explícito.
<div id="content" aria-live="polite">...</div>

Optimización móvil

En dispositivos móviles, el evento de desplazamiento se dispara con frecuencia, pero el Observador de Intersección es más confiable. Además, ajustar el umbral para tener en cuenta los puertos de vista más pequeños y la inercia táctil.

Técnicas avanzadas

Para situaciones de alto rendimiento como las redes sociales o grandes catálogos, considere estas optimizaciones.

Lazy Cargando imágenes

Nuevo contenido a menudo incluye imágenes. Carga perezosa estos utilizando el atributo en ] o el Observador de intersección para reducir el ancho de banda y mejorar el tiempo de carga inicial.

<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="..." />

Atracción virtual para grandes listas

Si su pergamino infinito administra miles de nodos DOM, el rendimiento se degradará. El desplazamiento virtual (o ventana) sólo hace los elementos visibles, reduciendo drásticamente el uso de la memoria. Bibliotecas como Clusterize.js] o React Virtualized puede ayudar, pero las implementaciones de JavaScript puros son posibles para casos simples.

Precargar contenido

Para eliminar la deriva percibida, precargar el siguiente lote de contenido en un contenedor oculto antes de que sea necesario. Cuando el usuario se desplaza al punto de activación, simplemente cambiar los elementos precargados en el DOM visible.

Conclusión

Implementar un pergamino infinito con JavaScript puede mejorar significativamente el compromiso del usuario proporcionando una experiencia de navegación suave y continua. Desde un oyente básico de desplazamiento hasta avanzado Intersection Observer y carga perezosa, la técnica se puede adaptar a las necesidades de cualquier sitio web. Recuerde equilibrar el rendimiento y la accesibilidad, y siempre proporcionar mecanismos de retroceso para los usuarios que prefieren la paginación discreta.