IntersectionObserver 🧪
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Esta API solo está disponible actualmente en los canales Canary y Experimental de React Native.
Si quieres probarla, por favor habilita el Canal Canario en tu aplicación.
La interfaz global IntersectionObserver, definida en las especificaciones web. Proporciona una forma de observar de manera asincrónica los cambios en la intersección de un elemento objetivo con un elemento ancestro o con el viewport del documento de nivel superior.
Referencia
Constructor
IntersectionObserver()
Consulta la documentación en MDN.
Crea un nuevo objeto IntersectionObserver que ejecutará una función callback especificada cuando detecte que la visibilidad de un elemento objetivo cruza uno o más valores de threshold o rnRootThreshold.
new IntersectionObserver(callback, options?)
Parámetros
callback
Función que se invoca cuando el porcentaje de visibilidad del elemento objetivo cruza un umbral. El callback recibe dos parámetros:
-
entries: Un array de objetosIntersectionObserverEntry, cada uno representando un umbral cruzado, ya sea volviéndose más o menos visible que el porcentaje especificado por dicho umbral. -
observer: La instancia deIntersectionObserverque invocó el callback.
options (opcional)
Un objeto opcional con las siguientes propiedades:
| 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. |
Propiedades de instancia
root
Consulta la documentación en MDN.
El elemento o documento cuyos límites se utilizan como caja delimitadora al verificar intersecciones.
rootMargin
Consulta la documentación en MDN.
Un rectángulo de desplazamiento aplicado a la caja delimitadora del root al calcular intersecciones.
rnRootThresholds ⚠️
No estándar
Esta es una extensión específica de React Native.
Lista de umbrales del root, ordenados numéricamente de forma ascendente, donde cada umbral es una proporción entre el área de intersección y el área de la caja delimitadora de la vista raíz especificada (que por defecto es el viewport).
Se generan notificaciones para un objetivo cuando se cruza cualquiera de los umbrales especificados en rnRootThresholds o thresholds para ese objetivo.
get rnRootThresholds(): ReadonlyArray<number> | null;
thresholds
Consulta la documentación en MDN.
Lista de umbrales, ordenados numéricamente de forma ascendente, donde cada umbral es una proporción entre el área de intersección y el área de la caja delimitadora de un objetivo observado.
Se generan notificaciones para un objetivo cuando se cruza cualquiera de los umbrales especificados en rnRootThresholds o thresholds para ese objetivo.
Métodos de instancia
disconnect()
Consulta la documentación en MDN.
Detiene la observación de cualquier objetivo por parte del objeto IntersectionObserver.
observe()
Consulta la documentación en MDN.
Indica al IntersectionObserver que comience a observar un elemento objetivo.
takeRecords()
Consulta la documentación en MDN.
Devuelve un array de objetos IntersectionObserverEntry para todos los objetivos observados.
unobserve()
Consulta la documentación en MDN.
Indica al IntersectionObserver que deje de observar un elemento objetivo específico.