Implementare lo scorrimento infinito

Lo scorrimento infinito carica altro contenuto quando l'utente si avvicina alla fine della lista. L'implementazione più semplice utilizza IntersectionObserver: inserisca un elemento "sentinel" alla fine della lista e lo osservi. Quando il sentinel entra nel viewport, esegua fetch della pagina successiva.

Aggiunga un <div> invisibile (oppure un segnaposto "loading...") dopo l'ultimo elemento della lista. Lo osservi con IntersectionObserver. Quando si verifica l'intersezione, significa che l'utente ha fatto scorrere la pagina vicino alla fine: è il momento di eseguire fetch di altri contenuti.

Al verificarsi dell'intersezione, esegua fetch della pagina successiva, renderizzi i nuovi elementi e riposizioni il sentinel (rimane automaticamente alla fine della lista se gli elementi vengono aggiunti prima di esso). Non è necessario eseguire unobserve e poi observe di nuovo: il sentinel è ancora osservato.

Un flag booleano loading impedisce di accumulare richieste se l'utente scorre rapidamente e provoca più intersezioni prima dell'arrivo della prima risposta. Senza questo flag, la stessa pagina viene scaricata ripetutamente e gli elementi compaiono duplicati.

Quando il server restituisce una pagina vuota (o segnala che "non ce ne sono altre"), rimuova l'osservazione del sentinel e lo sostituisca con un messaggio di fine lista. Le intersezioni successive non avviano richieste fetch e l'utente vede di aver raggiunto la fine.

Racchiuda fetch in try/catch. In caso di errore, lasci loading = true in modo che i tentativi non vengano avviati automaticamente; mostri un pulsante "Riprova" che reimposta loading e riattiva il caricamento. In caso contrario, gli errori di rete possono causare una raffica di tentativi.

rootMargin: "500px" avvia la richiesta fetch successiva 500 px prima che l'utente raggiunga il sentinel. Lo regoli in base all'altezza degli elementi e alla velocità media di scorrimento: se è troppo piccolo, gli utenti raggiungeranno il messaggio "nessun contenuto disponibile"; se è troppo grande, verranno caricati dati in anticipo non necessari.

Quando l'utente si allontana dalla pagina e poi torna, la posizione di scorrimento dovrebbe essere preservata e gli elementi caricati in precedenza dovrebbero essere renderizzati nuovamente. Memorizzi gli elementi in sessionStorage o in uno store in stile Zustand; li ripristini al mount e utilizzi scrollTo per raggiungere l'offset memorizzato.

Gli scorrimenti infiniti molto lunghi accumulano migliaia di nodi DOM. Per feed molto lunghi (Twitter, Facebook), combini questa tecnica con il windowing: rimuova dal DOM gli elementi sopra il viewport e li ripristini quando l'utente scorre verso l'alto. Librerie come react-virtual o @tanstack/virtual gestiscono questa operazione in modo efficiente.

Lo scorrimento infinito è problematico per gli utenti che usano la tastiera o i lettori di schermo e che non possono raggiungere facilmente il piè di pagina. Fornisca un pulsante alternativo "Carica altro" come fallback e si assicuri che la pagina disponga di un vero piè di pagina accessibile tramite i tasti Home/End. È inoltre utile una regione aria-live che annunci i nuovi elementi.

Lo scorrimento con rimbalzo di iOS può provocare più intersezioni vicino alla fine della pagina. La protezione del caricamento gestisce la maggior parte dei casi; può anche applicare un debounce di 300 ms per filtrare la raffica di intersezioni durante il rimbalzo.

Le API del server dovrebbero restituire un "next cursor" invece di affidarsi ai numeri di pagina tracciati dal client, perché questa soluzione è più robusta rispetto all'inserimento o all'eliminazione di elementi durante lo scorrimento. Il client passa il cursore a ogni richiesta e si ferma quando il server non restituisce alcun cursore.

Lo scorrimento infinito utilizza un IntersectionObserver su un elemento sentinella alla fine dell'elenco. Quando si verifica l'intersezione, recuperi la pagina successiva, la renderizzi e continui a osservare l'elemento. Utilizzi un flag di caricamento come protezione, gestisca con attenzione la fine dei dati e gli errori e regoli rootMargin per definire la distanza di prefetch. Fornisca alternative accessibili da tastiera, come il pulsante Load more, e valuti il windowing per feed molto lunghi.