Baue Infinite Scroll in React mit einem kleinen IntersectionObserver-Hook, ganz ohne Paket, und halte lange Feeds dann mit Virtualisierung schnell. Live-Demos und Code zum Kopieren.
Setze nach dem letzten Eintrag ein leeres Sentinel-Element und beobachte es mit IntersectionObserver. Sobald es dem Viewport auf ein paar hundert Pixel nahekommt, lädst du die nächste Seite und hängst sie an. Ein Hook mit zwanzig Zeilen erledigt das ohne Bibliothek. Erreicht die Liste Tausende Zeilen, ergänze Virtualisierung, damit nur die sichtbaren Zeilen im DOM existieren.
IntersectionObserver-Optionen, die für Infinite Scroll zählen
Beide Demos unten laufen auf dieser Seite. Die erste lädt beim Scrollen ihres Panels erfundene Ergebnisseiten nach, die zweite scrollt durch zehntausend Zeilen und zeichnet dabei nur die etwa zwanzig, die du sehen kannst. Der Code für beide steht darunter, bereit zum Kopieren.
Nein. IntersectionObserver ist seit 2019 in allen großen Browsern verfügbar, und ein kleiner Hook deckt den üblichen Fall ab. Eine Bibliothek zum Datenabruf mit eingebauten Paging-Helfern lohnt sich, wenn du ohnehin eine für das Caching von Anfragen nutzt.
Virtualisierung rendert nur die Zeilen im sichtbaren Fenster plus einen kleinen Puffer, positioniert in einem Platzhalter mit der vollen Höhe der Liste. Greif darauf zurück, wenn das DOM Tausende Zeilen enthält und Scrollen oder Tippen zu ruckeln beginnt. @tanstack/react-virtual mit seinem Hook useVirtualizer ist eine verbreitete Wahl.
Suchmaschinen-Crawler scrollen nicht wie Menschen, Inhalte, die erst nach dem Scrollen erscheinen, werden also womöglich nie gesehen. Hinterlege den Feed mit echten paginierten URLs wie ?page=2, die eigenständig laden, und verlinke sie.
Meist erzeugt der Effect den Observer bei jedem Render neu, weil der Callback seine Identität ändert, oder die erste Seite ist zu kurz, um das Sentinel aus dem Bildschirm zu schieben. Halte den aktuellen Callback in einer Ref und sorge dafür, dass jede Seite mehr als den Viewport füllt.
Gibt eine Ref für das Sentinel zurück. Das aktuelle onLoadMore wird in einer Ref gehalten, damit der Observer einmal pro Änderung von enabled erstellt wird, nicht bei jedem Render.
Das loading-Flag verhindert doppelte Anfragen, und hasMore schaltet den Observer am Ende ab.
Installiere es mit npm install @tanstack/react-virtual. Die äußere Box scrollt, die innere Box ist so hoch wie die ganze Liste, und jede sichtbare Zeile wird mit translateY an ihren Platz verschoben.
Nur Zeilen nahe dem sichtbaren Fenster werden gerendert. estimateSize ist die Zeilenhöhe in Pixeln.
Demo: ein Feed, der beim Scrollen nachlädt
Scrolle im Panel. Jedes Mal, wenn das Sentinel in Reichweite kommt, kommt eine neue Seite mit zehn Einträgen hinzu, bis zu acht Seiten.
Feed-Demo
Beitrag {n}
Wird geladen...
Du hast das Ende erreicht.
Mehr laden
{items} Einträge, Seite {page} von {last}
Zurücksetzen
Demo: 10,000 Zeilen, nur die sichtbaren werden gerendert
Scrolle die Liste und sieh, wie wenige Zeilen in jedem Moment tatsächlich auf der Seite existieren.
Demo einer virtuellen Liste
Zeile {n}
{shown} von {total} Zeilen werden gerendert
Kostenlos starten · Keine Kreditkarte nötig