Scopri i principi e gli aspetti pratici dello scorrimento infinito.

Lo scorrimento infinito consente il caricamento continuo dei contenuti mentre gli utenti si spostano verso il basso nella pagina, a differenza del metodo click-to-load dell'impaginazione tradizionale. Questa funzionalità può offrire un'esperienza più fluida, soprattutto sui dispositivi mobili.

Scopri come impostare lo scorrimento infinito utilizzando semplici HTML, CSS e JavaScript.

Configurazione del frontend

Inizia con una struttura HTML di base per visualizzare i tuoi contenuti. Ecco un esempio:

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>

Questa pagina contiene una serie di immagini segnaposto e fa riferimento a due risorse: un file CSS e un file JavaScript.

Stile CSS per contenuti scorrevoli

Per visualizzare le immagini segnaposto in una griglia, aggiungi il seguente CSS al tuo file style.css file:

* {
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%);
}

Al momento, la tua pagina dovrebbe assomigliare a questa:

Implementazione principale con JS

Modificare script.js. Per implementare lo scorrimento infinito, è necessario rilevare quando l'utente ha effettuato lo scorrimento nella parte inferiore del contenitore del contenuto o della pagina.

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

Quindi, crea una funzione per recuperare più dati segnaposto.

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");
 }
}

Per questo progetto, puoi utilizzare l'API da fakestoreapi.

Per confermare che i tuoi dati vengano recuperati durante lo scorrimento, dai un'occhiata alla console:

Noterai che i tuoi dati vengono recuperati più volte durante lo scorrimento, il che può essere un fattore che influisce sulle prestazioni del dispositivo. Per evitare ciò, crea uno stato di recupero iniziale dei dati:

let isFetching = false;

Quindi, modifica la funzione di recupero in modo che recuperi i dati solo al termine di un recupero precedente.

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
 }
}

Visualizzazione del nuovo contenuto

Per visualizzare il nuovo contenuto quando l'utente scorre la pagina verso il basso, crea una funzione che aggiunga le immagini al contenitore principale.

Innanzitutto, seleziona l'elemento genitore:

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

Quindi, crea una funzione per aggiungere contenuto.

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
 });
}

Infine, modifica la funzione di recupero e passa i dati recuperati alla funzione di aggiunta.

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;
 }
}

E con ciò, il tuo scorrimento infinito ora funziona.

Per migliorare l'esperienza dell'utente, puoi visualizzare un indicatore di caricamento quando recuperi nuovi contenuti. Inizia aggiungendo questo HTML.

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

Selezionare quindi l'elemento di caricamento.

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

Infine, crea due funzioni per attivare/disattivare la visibilità dell'indicatore di caricamento.

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

Quindi, aggiungili alla funzione di recupero.

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;
 }
}

Che dà:

Alcune best practice da seguire includono:

  • Non recuperare troppi elementi contemporaneamente. Ciò può sovraccaricare il browser e peggiorare le prestazioni.
  • Invece di recuperare il contenuto immediatamente dopo aver rilevato un evento di scorrimento, utilizzare una funzione antirimbalzo per ritardare leggermente il recupero. Questo può prevenire eccessive richieste di rete.
  • Non tutti gli utenti preferiscono lo scorrimento infinito. Offri un'opzione per utilizzare un componente di impaginazione se desiderato.
  • Se non ci sono più contenuti da caricare, informa l'utente invece di provare continuamente a recuperare più contenuti.

Padroneggiare il caricamento continuo dei contenuti

Lo scorrimento infinito consente agli utenti di sfogliare i contenuti senza problemi ed è ottimo per le persone che utilizzano dispositivi mobili. Se utilizzi i suggerimenti e i consigli importanti di questo articolo, puoi aggiungere questa funzionalità ai tuoi siti web.

Ricordati di pensare a come si sentono gli utenti quando utilizzano il tuo sito. Mostra elementi come segnali di avanzamento e note di errore per assicurarti che l'utente sappia cosa sta succedendo.