IntersectionObserver do efektów wyzwalanych przewijaniem

API IntersectionObserver efektywnie monitoruje, czy co najmniej jeden element pojawia się w obszarze widocznym przeglądarki lub go opuszcza, ewentualnie w obszarze widocznym określonego elementu nadrzędnego. W przeciwieństwie do procedur obsługi przewijania, które są wywoływane przy każdym przesunięciu o piksel, obserwator wywołuje procedurę obsługi dopiero po przekroczeniu przez element określonego progu, dzięki czemu efekty zależne od przewijania działają znacznie wydajniej.

Procedura obsługi otrzymuje tablicę obiektów IntersectionObserverEntry, po jednym dla każdego obserwowanego elementu. Każdy wpis ma wartość logiczną isIntersecting (ma wartość true, gdy element jest widoczny) oraz liczbę intersectionRatio z zakresu od 0 do 1, określającą ułamek aktualnie widocznego elementu. Na ich podstawie można określić stan widoczności.

Obserwator należy utworzyć wewnątrz useEffect, a następnie wywołać observer.observe(ref.current), aby rozpocząć obserwowanie elementu. Ref musi być przypisany do śledzonego elementu DOM. Obserwator należy utworzyć po zamontowaniu komponentu, aby wartość ref.current była już ustawiona.

W funkcji sprzątającej useEffect należy wywołać observer.unobserve(element), aby przestać obserwować konkretny element, lub observer.disconnect(), aby zatrzymać wszystkie obserwacje. Pominięcie sprzątania powoduje, że obserwator działa po odmontowaniu komponentu, co może prowadzić do błędów lub wycieków pamięci.

Opcja threshold określa, kiedy wywoływana jest procedura obsługi. Wartość 0 powoduje jej wywołanie, gdy tylko widoczny stanie się dowolny piksel elementu. Wartość 1 powoduje jej wywołanie dopiero po uzyskaniu pełnej widoczności elementu. Można także przekazać tablicę, na przykład [0, 0.5, 1], aby otrzymywać wywołania przy wielu poziomach widoczności.

rootMargin rozszerza lub zmniejsza efektywny obszar przecięcia przy użyciu składni podobnej do składni CSS: '100px 0px' powoduje wywołanie 100 pikseli przed wejściem elementu do obszaru widocznego. Wartość '-100px' powoduje wywołanie dopiero wtedy, gdy element znajdzie się 100 pikseli wewnątrz obszaru widocznego. Jest to przydatne podczas wstępnego ładowania lub animowania elementu, zanim stanie się on w pełni widoczny.

Aby leniwie ładować obrazy, początkowo należy ustawić atrybut data-src zamiast src. Gdy obserwator zostanie wywołany z wartością isIntersecting: true, należy skopiować data-src do src, aby uruchomić żądanie sieciowe. Następnie należy wywołać observer.unobserve(entry.target), ponieważ obraz trzeba załadować tylko raz.

W przypadku animacji pojawiania się należy dodać klasę CSS, gdy wartość isIntersecting zmieni się na true: element.classList.add('visible'). Przejście należy zdefiniować w CSS: .card { opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s; } oraz .card.visible { opacity: 1; transform: none; }. Obserwator wydajnie wykrywa moment uruchomienia animacji.

IntersectionObserver doskonale nadaje się do śledzenia wyświetleń. Gdy element z atrybutem data-analytics-id znajdzie się w obszarze obserwacji przy progu 0.5, należy wysłać zdarzenie analityczne. Pozwala to znacznie dokładniej mierzyć, które sekcje treści użytkownicy rzeczywiście przeczytali, niż samo śledzenie procentu przewinięcia.

Pojedyncza instancja IntersectionObserver może obserwować wiele elementów — wystarczy wywołać observer.observe(element) dla każdego z nich. Wszystkie obserwowane elementy korzystają z tego samego callbacku i tych samych opcji. W callbacku należy użyć entry.target, aby ustalić, który element wywołał powiadomienie.

Wielokrotnego użytku hook useInView zwraca wartość [ref, inView]. Należy przypisać ref do dowolnego elementu i odczytywać inView, aby sprawdzić, czy element jest obecnie widoczny. Hook przyjmuje obiekt options określający threshold i rootMargin. Ta abstrakcja pozwala deklaratywnie definiować efekty przewijania w dowolnym komponencie.

Co oznacza próg IntersectionObserver równy 0?

IntersectionObserver wydajnie śledzi widoczność elementów za pomocą isIntersecting i intersectionRatio. Należy zawsze sprzątać po obserwacji za pomocą unobserve lub disconnect. Parametr threshold służy do określania momentu wywołania, a rootMargin — do rozszerzania obszaru wykrywania. Mechanizm ten można stosować do leniwego ładowania, animacji i śledzenia danych analitycznych.