Conozca los principios y aspectos prácticos del desplazamiento infinito.

El desplazamiento infinito permite que el contenido se cargue continuamente a medida que los usuarios avanzan por la página, a diferencia del método de hacer clic para cargar de la paginación tradicional. Esta función puede ofrecer una experiencia más fluida, especialmente en dispositivos móviles.

Descubra cómo configurar el desplazamiento infinito utilizando HTML, CSS y JavaScript sin formato.

Configurando la interfaz

Comience con una estructura HTML básica para mostrar su contenido. He aquí un ejemplo:

html>
<html>
<head>
<linkrel="stylesheet"href="style.css" />
head>
<body>
<h1>Infinite Scroll Pageh1>
<divclass="products__list">
<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />







instagram viewer



<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />
div>
<scriptsrc="script.js">script>
body>
html>

Esta página contiene una serie de imágenes de marcador de posición y hace referencia a dos recursos: un archivo CSS y un archivo JavaScript.

Estilo CSS para contenido desplazable

Para mostrar las imágenes del marcador de posición en una cuadrícula, agregue el siguiente CSS a su estilo.css archivo:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }


body {
font-family: Cambria, Times, "TimesNewRoman", serif;
}


h1 {
text-align: center;
font-size: 5rem;
padding: 2rem;
}


img {
width: 100%;
display: block;
}


.products__list {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}


.products__list > * {
width: calc(33% - 2rem);
}


.loading-indicator {
display: none;
position: absolute;
bottom: 30px;
left: 50%;
background: #333;
padding: 1rem 2rem;
color: #fff;
border-radius: 10px;
transform: translateX(-50%);
}

Por el momento, tu página debería verse así:

Implementación principal con JS

Editar script.js. Para implementar el desplazamiento infinito, debe detectar cuándo el usuario se ha desplazado cerca de la parte inferior del contenedor de contenido o de la página.

"use strict";
window.addEventListener("scroll", () => {
if (
window.scrollY + window.innerHeight >=
document.documentElement.scrollHeight - 100
 ) {
// User is near the bottom, fetch more content
 fetchMoreContent();
 }
});

Luego, cree una función para recuperar más datos de marcador de posición.

asyncfunctionfetchMoreContent() {
try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");
if (!response.ok) {
thrownewError("Network response was not ok");
 }


let data = await response.json();
console.log(data);
 } catch (error) {
console.error("There was a problem fetching new content:", error);
 } finally {
console.log("Fetch function fired");
 }
}

Para este proyecto, puede utilizar la API de fakestoreapi.

Para confirmar que sus datos se están recuperando al desplazarse, eche un vistazo a la consola:

Notarás que tus datos se obtienen varias veces al desplazarte, lo que puede ser un factor que perjudique el rendimiento del dispositivo. Para evitar esto, cree un estado de recuperación inicial de los datos:

let isFetching = false;

Luego, modifique su función de recuperación para recuperar datos solo después de que haya finalizado una recuperación anterior.

asyncfunctionfetchMoreContent() {
if (isFetching) return; // Exit if already fetching
 isFetching = true; // Set the flag to true


try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");


if (!response.ok) {
thrownewError("Network response was not ok");
 }
let data = await response.json();
 } catch (error) {
console.error("There was a problem fetching new content:", error);
 } finally {
console.log("Fetch function fired");
 isFetching = false; // Reset the flag to false
 }
}

Mostrando el nuevo contenido

Para mostrar contenido nuevo cuando el usuario se desplaza hacia abajo en la página, cree una función que agregue las imágenes al contenedor principal.

Primero, seleccione el elemento padre:

const productsList = document.querySelector(".products__list");

Luego, cree una función para agregar contenido.

functiondisplayNewContent(data) {
 data.forEach((item) => {
const imgElement = document.createElement("img");
 imgElement.src = item.image;
 imgElement.alt = item.title;
 productsList.appendChild(imgElement); // Append to productsList container
 });
}

Finalmente, modifique su función de recuperación y pase los datos recuperados a la función de agregar.

asyncfunctionfetchMoreContent() {
if (isFetching) return;
 isFetching = true;


try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");


if (!response.ok) {
thrownewError("Network response was not ok");
 }


let data = await response.json();
 displayNewContent(data);
 } catch (error) {
console.error("There was a problem fetching new content:", error);
 } finally {
console.log("Fetch function fired");
 isFetching = false;
 }
}

Y con eso, tu desplazamiento infinito ahora funciona.

Para mejorar la experiencia del usuario, puede mostrar un indicador de carga al buscar contenido nuevo. Comience agregando este HTML.

<h1class="loading-indicator">Loading...h1>

Luego seleccione el elemento de carga.

const loadingIndicator = document.querySelector(".loading-indicator");

Finalmente, cree dos funciones para alternar la visibilidad del indicador de carga.

functionshowLoadingIndicator() {
 loadingIndicator.style.display = "block";
console.log("Loading...");
}
functionhideLoadingIndicator() {
 loadingIndicator.style.display = "none";
console.log("Finished loading.");
}

Luego, agréguelos a la función de recuperación.

asyncfunctionfetchMoreContent() {
if (isFetching) return; // Exit if already fetching
 isFetching = true;
 showLoadingIndicator(); // Show loader


try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");


if (!response.ok) {
thrownewError("Network response was not ok");
 }
let data = await response.json();
 displayNewContent(data);
 } catch (error) {
console.error("There was a problem fetching new content:", error);
 } finally {
console.log("Fetch function fired");
 hideLoadingIndicator(); // Hide loader
 isFetching = false;
 }
}

Lo que da:

Algunas de las mejores prácticas a seguir incluyen:

  • No busques demasiados artículos simultáneamente. Esto puede saturar el navegador y degradar el rendimiento.
  • En lugar de buscar contenido inmediatamente después de detectar un evento de desplazamiento, utilizar una función antirrebote para retrasar ligeramente la recuperación. Esto puede evitar solicitudes excesivas de red.
  • No todos los usuarios prefieren el desplazamiento infinito. Ofrecer una opción para utilizar un componente de paginación Si es deseado.
  • Si no hay más contenido para cargar, informe al usuario en lugar de intentar buscar más contenido continuamente.

Dominar la carga de contenido sin interrupciones

El desplazamiento infinito permite a los usuarios explorar contenido sin problemas y es ideal para personas que usan dispositivos móviles. Si utiliza los consejos y sugerencias importantes de este artículo, puede agregar esta función a sus sitios web.

Recuerde pensar en cómo se sienten los usuarios cuando utilizan su sitio. Muestre cosas como señales de progreso y notas de error para asegurarse de que el usuario sepa lo que está sucediendo.