IntersectionObserver 🧪
Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →
Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →
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.
new IntersectionObserver(callback, options?)
Parametry
callback
Funkcja wywoływana, gdy procentowa widoczność elementu docelowego przekroczy próg. Callback przyjmuje dwa parametry:
-
entries: Tablica obiektówIntersectionObserverEntry, 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: InstancjaIntersectionObserver, 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 ⚠️
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.
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.