IntersectionObserver 🧪

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Canary 🧪

To API jest obecnie dostępne tylko w kanałach Canary i Experimental React Native.

Jeśli chcesz je wypróbować, włącz kanał Canary w swojej aplikacji.

Globalny interfejs IntersectionObserver zdefiniowany w specyfikacjach sieciowych. Umożliwia asynchroniczne obserwowanie zmian w przecięciu elementu docelowego z elementem nadrzędnym lub viewportem dokumentu najwyższego poziomu.

---

Dokumentacja

Konstruktor

IntersectionObserver()

Zobacz dokumentację w MDN.

Tworzy nowy obiekt IntersectionObserver, który wykonuje określoną funkcję zwrotną, gdy wykryje, że widoczność elementu docelowego przekroczyła jedną lub więcej wartości threshold lub rnRootThreshold.

ts

new IntersectionObserver(callback, options?)

Parametry

callback

Funkcja wywoływana, gdy procentowa widoczność elementu docelowego przekroczy próg. Callback przyjmuje dwa parametry:

• entries: Tablica obiektów IntersectionObserverEntry, z których każdy reprezentuje przekroczony próg, oznaczający zwiększenie lub zmniejszenie widoczności względem procentu określonego przez ten próg.

• observer: Instancja IntersectionObserver, która wywołała callback.

options (opcjonalne)

Opcjonalny obiekt z następującymi właściwościami:

Name	Type	Description
root	Element | null	An element that is an ancestor of the target, whose bounding rectangle will be considered the viewport. Defaults to the root viewport if not specified or if null.
rootMargin	string	A string which specifies a set of offsets to add to the root's bounding box when calculating intersections. Defaults to "0px 0px 0px 0px".
threshold	number | number[]	Either a single number or an array of numbers between 0.0 and 1.0, specifying a ratio of intersection area to total bounding box area for the observed target. Defaults to [0] if rnRootThreshold is not set.
rnRootThreshold ⚠️	number | number[]	React Native specific. Either a single number or an array of numbers between 0.0 and 1.0, specifying a ratio of intersection area to the total root area.

Właściwości instancji

root

Zobacz dokumentację w MDN.

Element lub dokument, którego granice są używane jako prostokąt ograniczający podczas testowania przecięcia.

rootMargin

Zobacz dokumentację w MDN.

Prostokąt przesunięcia stosowany do prostokąta ograniczającego elementu root podczas obliczania przecięć.

rnRootThresholds ⚠️

Niestandardowe

To rozszerzenie specyficzne dla React Native.

Lista progów roota, posortowana rosnąco liczbowo, gdzie każdy próg reprezentuje stosunek obszaru przecięcia do obszaru prostokąta ograniczającego określonego widoku roota (domyślnie viewportu).

Powiadomienia dla celu są generowane, gdy którykolwiek z progów określonych w rnRootThresholds lub thresholds zostanie przekroczony dla tego celu.

ts

get rnRootThresholds(): ReadonlyArray<number> | null;

thresholds

Zobacz dokumentację w MDN.

Lista progów, posortowana rosnąco liczbowo, gdzie każdy próg reprezentuje stosunek obszaru przecięcia do obszaru prostokąta ograniczającego obserwowanego celu.

Powiadomienia dla celu są generowane, gdy którykolwiek z progów określonych w rnRootThresholds lub thresholds zostanie przekroczony dla tego celu.

Metody instancji

disconnect()

Zobacz dokumentację w MDN.

Zatrzymuje obserwowanie wszystkich celów przez obiekt IntersectionObserver.

observe()

Zobacz dokumentację w MDN.

Rozpoczyna obserwowanie elementu docelowego przez IntersectionObserver.

takeRecords()

Zobacz dokumentację w MDN.

Zwraca tablicę obiektów IntersectionObserverEntry dla wszystkich obserwowanych celów.

unobserve()

Zobacz dokumentację w MDN.

Powoduje, że IntersectionObserver przestaje obserwować określony element docelowy.