Implementacja nieskończonego przewijania

Nieskończone przewijanie ładuje kolejne treści, gdy użytkownik zbliża się do końca listy. Najczytelniejsza implementacja korzysta z IntersectionObserver: na końcu listy należy umieścić element „sygnalizacyjny” i rozpocząć jego obserwowanie. Gdy element sygnalizacyjny pojawi się w obszarze widocznym, należy pobrać następną stronę.

Po ostatnim elemencie listy należy dodać niewidoczny element <div> (albo element zastępczy „ładowanie...” ). Trzeba obserwować go za pomocą IntersectionObserver. Gdy element zostanie przecięty, oznacza to, że użytkownik przewinął stronę w pobliże końca — to właściwy moment na pobranie kolejnych danych.

Po przecięciu należy pobrać następną stronę, wyrenderować nowe elementy i ponownie umieścić element sygnalizacyjny (pozostanie on automatycznie na końcu listy, jeśli nowe elementy zostaną dodane przed nim). Nie trzeba wyłączać ani ponownie włączać obserwowania — element sygnalizacyjny jest nadal obserwowany.

Flaga logiczna loading zapobiega nakładaniu się żądań, gdy użytkownik szybko przewija stronę i powoduje wiele przecięć przed nadejściem pierwszej odpowiedzi. Bez niej ta sama strona jest pobierana wielokrotnie, a elementy pojawiają się zduplikowane.

Gdy serwer zwróci pustą stronę (albo zasygnalizuje „brak kolejnych danych”), należy wyłączyć obserwowanie elementu sygnalizacyjnego i zastąpić go komunikatem o końcu listy. Przyszłe przecięcia nie będą wywoływać pobierania, a użytkownik zobaczy, że dotarł do końca.

Wywołanie fetch należy umieścić w bloku try/catch. W razie błędu trzeba pozostawić loading = true, aby ponowne próby nie uruchamiały się automatycznie, oraz wyświetlić przycisk „Ponów”, który zresetuje loading i ponownie uruchomi ładowanie. Bez tego awarie sieci prowadzą do lawiny ponownych prób.

rootMargin: "500px" rozpoczyna pobieranie kolejnej strony 500 pikseli przed dotarciem użytkownika do elementu sygnalizacyjnego. Wartość należy dostosować do wysokości elementów i średniej szybkości przewijania — zbyt mała spowoduje wyświetlenie komunikatu „brak treści”, a zbyt duża doprowadzi do pobierania danych z nadmiernym wyprzedzeniem.

Gdy użytkownik opuści stronę i na nią wróci, należy zachować pozycję przewijania ORAZ ponownie wyrenderować wcześniej załadowane elementy. Elementy można przechowywać w sessionStorage lub magazynie w stylu Zustand; po zamontowaniu należy je przywrócić i przewinąć stronę do zapamiętanego przesunięcia za pomocą scrollTo.

Podczas długiego nieskończonego przewijania w DOM gromadzą się tysiące węzłów. W przypadku bardzo długich kanałów (Twitter, Facebook) warto połączyć to rozwiązanie z wirtualizacją: usuwać z DOM elementy znajdujące się powyżej obszaru widocznego i przywracać je podczas przewijania w górę. Biblioteki takie jak react-virtual lub @tanstack/virtual robią to wydajnie.

Nieskończone przewijanie utrudnia korzystanie osobom używającym klawiatury i czytników ekranowych, które nie mogą łatwo dotrzeć do stopki. Należy zapewnić alternatywny przycisk „Wczytaj więcej” oraz zadbać o prawdziwą stopkę dostępną za pomocą klawiszy Home/End. Pomocny jest również region aria-live informujący o nowych elementach.

Odbijanie podczas przewijania w iOS może powodować wielokrotne przecięcia w pobliżu końca. Blokada ładowania obsługuje większość takich przypadków; można również zastosować opóźnienie 300 ms, aby odfiltrować serię przecięć występujących podczas odbijania.

Interfejsy API serwera powinny zwracać „następny kursor” zamiast polegać na numerach stron śledzonych po stronie klienta — takie rozwiązanie jest odporne na dodawanie i usuwanie elementów podczas przewijania. Klient przekazuje kursor przy każdym żądaniu i kończy działanie, gdy serwer nie zwróci kursora.

Dlaczego flaga „loading” jest konieczna w callbacku IntersectionObservera używanym do nieskończonego przewijania?

Nieskończone przewijanie korzysta z IntersectionObservera na elemencie sentinel umieszczonym na końcu listy. Po wykryciu przecięcia pobierz następną stronę, wyrenderuj ją i nadal obserwuj ten element. Zabezpiecz ten mechanizm flagą loading, odpowiednio obsłuż koniec danych i błędy, a także dostosuj rootMargin do odległości wstępnego pobierania. Zapewnij alternatywę dostępną z klawiatury (przycisk „Wczytaj więcej”) i rozważ wirtualizację w przypadku bardzo długich kanałów.