JavaScript Academy · Lezione

Scorrimento infinito

Carichi altri contenuti mentre l'utente scorre.

Scorrimento infinito è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Che cos'è lo scorrimento infinito

Lo scorrimento infinito carica automaticamente altri contenuti quando l'utente si avvicina alla fine di un elenco, senza richiedere un clic su Pagina successiva. I feed dei social network e i risultati di ricerca lo utilizzano comunemente.

Il pattern del sentinel

La tecnica più pulita utilizza un sentinel: un elemento vuoto posizionato alla fine dell'elenco. Quando il sentinel entra nell'area visibile, recuperi e aggiunga il blocco successivo.

// Markup pattern:
// <ul id="feed"> ...items... </ul>
// <div id="sentinel"></div>  <!-- trigger element -->

Osservare il sentinel

Imposti un Intersection Observer sul sentinel. Poiché si trova dopo l'ultimo elemento, la sua visibilità indica che l'utente ha raggiunto la fine.

const sentinel = document.getElementById('sentinel');
const observer = new IntersectionObserver(onIntersect, {
  rootMargin: '200px' // load a bit early
});
observer.observe(sentinel);

Attivare un caricamento

Nel callback, verifichi isIntersecting. Quando il valore è true, carichi la pagina successiva di dati.

function onIntersect(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreItems();
    }
  });
}

Tenere traccia della pagina

Mantenga un contatore delle pagine, così ogni caricamento recupera la porzione successiva. Lo incrementi dopo un recupero riuscito.

let page = 1;

async function loadMoreItems() {
  const items = await fetchPage(page);
  appendItems(items);
  page++;
}

Evitare caricamenti duplicati

Il callback può essere eseguito ripetutamente. Utilizzi un flag loading per impedire l'avvio di un nuovo recupero mentre uno è già in corso.

let loading = false;

async function loadMoreItems() {
  if (loading) return;
  loading = true;
  const items = await fetchPage(page);
  appendItems(items);
  page++;
  loading = false;
}

Aggiungere i nuovi elementi

Aggiunga gli elementi recuperati prima del sentinel, in modo che questo resti in fondo all'elenco in crescita, pronto ad attivare il caricamento successivo.

function appendItems(items) {
  const feed = document.getElementById('feed');
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.title;
    feed.appendChild(li);
  });
}

Fermarsi alla fine

Quando il server non restituisce altri dati, disconnetta l'observer affinché smetta di tentare il caricamento. In questo modo evita richieste vuote infinite.

const items = await fetchPage(page);
if (items.length === 0) {
  observer.disconnect(); // no more data
  return;
}

Perché rootMargin è utile

Un rootMargin ampio, ad esempio 200px, avvia il caricamento prima che l'utente raggiunga effettivamente la fine, così i nuovi elementi compaiono senza interruzioni visibili.

new IntersectionObserver(onIntersect, {
  rootMargin: '300px' // begin loading well before the end
});

Note sull'accessibilità

Lo scorrimento infinito può intrappolare gli utenti della tastiera e degli screen reader e nascondere il piè di pagina. Valuti un pulsante manuale Carica altro come fallback e annunci educatamente i nuovi contenuti tramite regioni live ARIA.

Il flusso completo

Scorrimento infinito con Intersection Observer: inserisca un sentinel, lo osservi, carichi e aggiunga i dati quando compare, eviti i caricamenti duplicati e disconnetta l'observer quando i dati terminano. Non sono necessari calcoli sullo scorrimento.

Verifica rapida

Verifichi la Sua comprensione dello scorrimento infinito.

Riepilogo

Ha realizzato lo scorrimento infinito:

Inserisca un elemento sentinel dopo l'elenco.
Lo osservi con un Intersection Observer.
All'intersezione, recuperi e aggiunga la pagina successiva.
Utilizzi un flag loading per evitare recuperi duplicati.
Disconnetta l'observer quando i dati sono esauriti.

Ora passeremo alle animazioni attivate dallo scorrimento.

Domande Frequenti

La lezione «Scorrimento infinito» è gratuita?

Sì — il testo completo di «Scorrimento infinito» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Scorrimento infinito»?

Carichi altri contenuti mentre l'utente scorre. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Scorrimento infinito»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy