Crea l'infinite scroll in React con un piccolo hook IntersectionObserver, senza pacchetti, poi mantieni veloci i feed lunghi con la virtualizzazione. Demo dal vivo e codice da copiare.
Metti un elemento sentinella vuoto dopo l'ultimo elemento e osservalo con IntersectionObserver. Quando arriva a poche centinaia di pixel dal viewport, recupera la pagina successiva e aggiungila in coda. Un hook di venti righe lo fa senza librerie. Quando la lista arriva a migliaia di righe, aggiungi la virtualizzazione così nel DOM esistono solo le righe visibili.
Le opzioni di IntersectionObserver che contano per l'infinite scroll
Entrambe le demo qui sotto girano in questa pagina. La prima carica pagine finte di risultati mentre scorri il suo pannello; la seconda scorre diecimila righe disegnando solo le venti circa che puoi vedere. Il codice di ciascuna è sotto, pronto da copiare.
No. IntersectionObserver è disponibile in tutti i principali browser dal 2019, e un piccolo hook copre il caso comune. Una libreria di data fetching con helper di paginazione integrati conviene quando ne usi già una per mettere in cache le richieste.
La virtualizzazione renderizza solo le righe dentro la finestra visibile più un piccolo margine, posizionate dentro un contenitore alto quanto l'intera lista. Usala quando il DOM contiene migliaia di righe e lo scroll o la digitazione iniziano a rallentare. @tanstack/react-virtual e il suo hook useVirtualizer sono una scelta comune.
I crawler dei motori di ricerca non scorrono come le persone, quindi i contenuti che appaiono solo dopo lo scroll potrebbero non essere mai visti. Affianca al feed URL paginati reali come ?page=2 che si caricano da soli, e collegali.
Di solito l'effect ricrea l'observer a ogni render perché la callback cambia identità, oppure la prima pagina è troppo corta per spingere la sentinella fuori dallo schermo. Tieni l'ultima callback in un ref e assicurati che ogni pagina riempia più del viewport.
Restituisce un ref per la sentinella. L'ultimo onLoadMore viene tenuto in un ref così l'observer viene creato una volta per ogni cambio di enabled, non a ogni render.
Il flag loading impedisce richieste doppie, e hasMore spegne l'observer alla fine.
Installa con npm install @tanstack/react-virtual. Il riquadro esterno scorre, quello interno è alto quanto l'intera lista, e ogni riga visibile viene spostata in posizione con translateY.
Vengono renderizzate solo le righe vicine alla finestra visibile. estimateSize è l'altezza della riga in pixel.
Demo: un feed che si carica mentre scorri
Scorri dentro il pannello. Una nuova pagina di dieci elementi arriva ogni volta che la sentinella entra nel raggio, fino a otto pagine.
Demo del feed
Post {n}
Caricamento...
Sei arrivato alla fine.
Carica altri
{items} elementi, pagina {page} di {last}
Ricomincia
Demo: 10,000 righe, renderizzate solo quelle visibili
Scorri la lista e guarda quante poche righe esistono davvero nella pagina in ogni momento.
Demo della lista virtuale
Riga {n}
Rendering di {shown} righe su {total}
Inizia gratis · Nessuna carta di credito richiesta