¿Qué es el desplazamiento infinito?

Es posible que ya hayas visto sitios como tiendas en línea donde, a medida que te desplazas hacia abajo en la página, los productos aparecen continuamente. Otro ejemplo es infinito.horse, puede parecer sencillo pero es un excelente ejemplo para demostrar la funcionalidad de “Infinite Scrolls”. Cuando accedes al sitio web, ves un caballo, pero cuando te desplazas hacia abajo en la página, te das cuenta de que las patas del caballo continúan creciendo indefinidamente y nunca llegas a las patas del caballo.

Implementando desplazamiento infinito

Esta funcionalidad se utiliza ampliamente en el desarrollo moderno. Podemos ver el desplazamiento infinito en acción en las principales redes sociales, como Twitter, Facebook y especialmente Instagram, donde el contenido parece no terminar nunca a medida que nos desplazamos hacia abajo en la página.

En este artículo, demostraré una implementación básica de esta funcionalidad. Sin embargo, este enfoque no aborda problemas como consultas largas, implementación de almacenamiento en caché y otras soluciones necesarias para las aplicaciones de producción. Aún así, este es un punto de partida para comprender cómo podemos implementar esta función.

Paso 1: decida dónde agregar la funcionalidad de desplazamiento infinito

Primero, decida dónde agregará la funcionalidad de desplazamiento infinito. ¿Será una lista de publicaciones o imágenes? También deberá decidir de dónde provendrán los datos. Para este ejemplo, usaremos imágenes de una API básica, la API Random Fox.

Paso 2: crea tu archivo HTML

Crea el archivo HTML e incluye un contenedor para tus imágenes aleatorias de zorros.

Fox Images

Paso 3: crea tu archivo CSS

Para este ejemplo, mantendremos la hoja de estilo muy simple.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  font-size: 32px;
  color: black;
  text-align: center;
  font-family: Verdana, sans-serif;
}

img {
  width: 400px;
  height: 400px;
  margin: 4px;
  object-fit: cover;
}

Paso 4: crea tu archivo JavaScript

Seleccione el contenedor y obtenga la URL de la API de Random Fox. No olvide vincular sus archivos JavaScript y CSS en HTML.

const container = document.querySelector('.container');
const URL = "https://randomfox.ca/images/";

function getRandomNumber() {
  return Math.floor(Math.random() * 100);
}

function loadImages(numImages = 6) {
  let i = 0;
  while (i 




  
  
  Paso 5: agregue el evento de desplazamiento


Para implementar la funcionalidad de desplazamiento infinito, agregue este detector de eventos:


window.addEventListener('scroll', () => {
  if (window.scrollY   window.innerHeight >= document.documentElement.scrollHeight) {
    loadImages();
  }
});




Si la suma de scrollY e internalHeight es mayor o igual que scrollHeight, significa que hemos llegado al final del documento y por lo tanto necesitamos cargar más imágenes.


  
  
  Conclusión


Tu página ahora debería funcionar con la técnica de desplazamiento infinito. Aquí tienes un desafío: intenta rehacer este proyecto usando otra API de tu elección, y también implementa un estilo más elaborado para mostrar tus elementos. ¡Buena suerte!