IntersectionObserver para efectos activados por el desplazamiento

La API IntersectionObserver supervisa de forma eficiente si uno o varios elementos entran o salen de la ventana gráfica del navegador (o de un elemento ancestro especificado). A diferencia de los listeners de desplazamiento, que se activan con cada píxel, el observer solo llama a su función de devolución de llamada cuando el elemento cruza un umbral, por lo que ofrece un rendimiento mucho mejor para los efectos basados en el desplazamiento.

La función de devolución de llamada recibe un array de objetos IntersectionObserverEntry, uno por cada elemento observado. Cada entrada tiene un booleano isIntersecting (true cuando es visible) y un número intersectionRatio entre 0 y 1 (la fracción del elemento que está visible en ese momento). Utilice estos valores para determinar el estado de visibilidad.

Cree el observer dentro de un useEffect y llame a observer.observe(ref.current) para empezar a observar el elemento. El ref debe estar asociado al elemento del DOM que desea supervisar. Cree el observer después de montar el componente, para que ref.current ya esté definido.

En la función de limpieza de useEffect, llame a observer.unobserve(element) para dejar de observar un elemento específico, o a observer.disconnect() para detener todas las observaciones. Si olvida la limpieza, el observer persiste después de desmontar el componente, lo que puede provocar errores o fugas de memoria.

La opción threshold controla cuándo se activa la función de devolución de llamada. Un valor de 0 la activa en cuanto cualquier píxel del elemento es visible. Un valor de 1 la activa únicamente cuando el elemento es completamente visible. También puede pasar un array como [0, 0.5, 1] para recibir funciones de devolución de llamada en varios niveles de visibilidad.

rootMargin amplía o reduce el área de intersección efectiva mediante una sintaxis similar a CSS: '100px 0px' activa la función 100 px antes de que el elemento entre en la ventana gráfica. Utilice '-100px' para activarla únicamente cuando el elemento esté 100 px dentro de la ventana gráfica. Esto resulta útil para precargar o animar elementos antes de que sean completamente visibles.

Para cargar imágenes de forma diferida, establezca inicialmente un atributo data-src en lugar de src. Cuando el observador se active con isIntersecting: true, copie data-src en src para desencadenar la solicitud de red. Después, llame a observer.unobserve(entry.target), ya que la imagen solo debe cargarse una vez.

Para las animaciones de aparición gradual, añada una clase CSS cuando isIntersecting pase a ser true: element.classList.add('visible'). Defina la transición en CSS: .card { opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s; } y .card.visible { opacity: 1; transform: none; }. El observador activa el desencadenador de forma eficiente.

IntersectionObserver es ideal para realizar un seguimiento de las visualizaciones. Cuando un elemento con un atributo data-analytics-id pase a estar intersectando con un umbral de 0.5, desencadene un evento de analítica. Esto mide con precisión qué secciones del contenido leen realmente los usuarios y es mucho más fiable que un simple porcentaje de profundidad de desplazamiento.

Una sola instancia de IntersectionObserver puede observar varios elementos llamando a observer.observe(element) para cada uno. Todos los elementos observados comparten la misma función de callback y las mismas opciones. Use entry.target dentro del callback para identificar qué elemento desencadenó la notificación.

Un hook useInView reutilizable devuelve [ref, inView]. Asocie ref a cualquier elemento y consulte inView para saber si está visible actualmente. El hook acepta un objeto options para configurar threshold y rootMargin. Esta abstracción permite declarar efectos de desplazamiento en cualquier componente.

¿Qué significa un umbral de IntersectionObserver de 0?

IntersectionObserver realiza un seguimiento eficiente de la visibilidad de los elementos mediante isIntersecting y intersectionRatio. Limpie siempre la observación con unobserve o disconnect. Use threshold para controlar el punto de activación y rootMargin para ampliar la zona de detección. Aplíquelo para la carga diferida, las animaciones y el seguimiento de analítica.