IntersectionObserver API i progi

IntersectionObserver wywołuje funkcje zwrotne, gdy element pojawia się w obszarze widocznym (lub w innym kontenerze przewijania) albo z niego znika. Jest nowoczesną i wydajną alternatywą dla odbiorników zdarzeń przewijania — przeglądarka wykonuje obliczenia, a kod uruchamia się tylko przy rzeczywistych zmianach widoczności.

new IntersectionObserver(callback, options) tworzy obserwator. Funkcja zwrotna otrzymuje tablicę wpisów, gdy zmieniają się przecięcia; opcje określają obserwowany kontener oraz progi, przy których ma nastąpić wywołanie.

Każdy wpis zawiera target (obserwowany element), isIntersecting (wartość logiczną), intersectionRatio (od 0 do 1), boundingClientRect, intersectionRect oraz time. Do binarnych kontroli widoczności należy używać isIntersecting, a do logiki zależnej od procentu widocznego elementu — intersectionRatio.

{ threshold: 0.5 } wywołuje funkcję zwrotną za każdym razem, gdy współczynnik przecięcia przekroczy granicę 50%. Tablica [0, 0.25, 0.5, 0.75, 1] pozwala wywoływać ją przy każdym kolejnym kwartale — jest to przydatne przy tworzeniu wskaźników postępu lub analiz, które raportują „% widoczności”.

Domyślnie obserwator mierzy przecięcie z obszarem widocznym. Ustawienie root: someScrollableDiv pozwala mierzyć je względem wewnętrznego kontenera przewijania — na przykład wirtualizowanej listy umieszczonej w elemencie div o stałej wysokości.

rootMargin: "200px" powiększa obszar obserwacji o 200 pikseli z każdej strony. Należy użyć tej opcji, aby wywołać funkcję wcześniej (rozpocząć ładowanie obrazów 200 pikseli przed ich pojawieniem się w obszarze widocznym) lub później (wywoływać ją dopiero, gdy element całkowicie minie obszar widoczny).

observer.observe(element) rozpoczyna obserwowanie elementu, a observer.unobserve(element) je kończy. Gdy funkcja zwrotna nie jest już potrzebna (np. po jednokrotnym uruchomieniu leniwego ładowania), należy zawsze wyłączyć obserwowanie, aby zwolnić pamięć.

observer.disconnect() kończy obserwowanie wszystkich obserwowanych elementów. Należy wywołać tę metodę po odmontowaniu komponentu lub gdy obserwator nie jest już potrzebny — zapobiega to wyciekom powodowanym przez obserwatory działające dłużej niż przypadek użycia, do którego je utworzono.

Funkcje zwrotne są wywoływane asynchronicznie i grupowo — wiele zmian przecięcia podczas szybkiego przewijania powoduje jedno wywołanie z wszystkimi wpisami, a nie osobne wywołanie dla każdego elementu. To duża korzyść wydajnościowa w porównaniu z odbiornikami przewijania, które uruchamiają się przy każdym zdarzeniu przewijania.

Po rozpoczęciu obserwowania nowego elementu funkcja zwrotna jest wywoływana niemal natychmiast z jego bieżącym stanem. Ułatwia to obsługę elementów, które są już widoczne w chwili rozpoczęcia obserwacji, bez tworzenia osobnej ścieżki inicjalizacji.

Leniwe ładowanie obrazów, uruchamianie animacji po przewinięciu elementu do obszaru widocznego, nieskończone przewijanie (obserwowanie elementu sygnalizacyjnego w pobliżu końca listy), śledzenie artykułów rzeczywiście przeczytanych przez użytkownika oraz przełączanie przyklejonego nagłówka na podstawie widoczności sekcji hero.

Jaka jest różnica między threshold: 0 a threshold: 1 w IntersectionObserver?

IntersectionObserver wywołuje funkcje zwrotne przy zmianach widoczności elementów, zapewniając wbudowaną optymalizację i grupowanie wywołań — należy zastępować nim odbiorniki przewijania w logice zależnej od widoczności. Konfigurację określają threshold (od 0 do 1 albo tablica), root (niestandardowy kontener przewijania) oraz rootMargin (powiększenie lub pomniejszenie obserwowanego obszaru). Metody observe i unobserve służą do obsługi konkretnych elementów, a disconnect sprząta wszystko.