API IntersectionObserver y umbrales

IntersectionObserver ejecuta callbacks cuando un elemento entra o sale de la ventana gráfica (o de otro contenedor con desplazamiento). Es la alternativa moderna y eficiente a los listeners de desplazamiento: el navegador hace los cálculos y su código solo se ejecuta cuando realmente cambia la visibilidad.

new IntersectionObserver(callback, options) crea un observador. El callback recibe un array de entradas cuando cambian las intersecciones; las opciones controlan qué contenedor se observa y en qué umbrales.

Cada entrada tiene target (el elemento observado), isIntersecting (booleano), intersectionRatio (de 0 a 1), boundingClientRect, intersectionRect y time. Utilice isIntersecting para comprobaciones binarias de visibilidad e intersectionRatio para la lógica basada en el porcentaje visible.

{ threshold: 0.5 } ejecuta el callback cada vez que la proporción de intersección cruza el 50 %. Utilice un array [0, 0.25, 0.5, 0.75, 1] para ejecutarlo en cada cuarto; resulta útil para crear indicadores de progreso o analíticas que informen del «% visible».

De forma predeterminada, el observador mide la intersección con la ventana gráfica. Establezca root: someScrollableDiv para medirla con respecto a un contenedor de desplazamiento interno; por ejemplo, una lista virtualizada dentro de un div de altura fija.

rootMargin: "200px" amplía 200 píxeles por cada lado del área de observación. Utilícelo para ejecutar el callback antes (empiece a cargar imágenes 200 px antes de que entren en la ventana gráfica) o después (ejecútelo solo cuando hayan salido completamente de la ventana gráfica).

observer.observe(element) comienza a observar un elemento; observer.unobserve(element) deja de hacerlo. Deje siempre de observarlo cuando ya no necesite el callback (por ejemplo, después de que la carga diferida se active una vez) para liberar memoria.

observer.disconnect() deja de observar todos los elementos observados. Llámelo cuando se desmonte el componente o ya no necesite el observador; así evitará fugas causadas por observadores que sobrevivan a su caso de uso.

Los callbacks se entregan de forma asíncrona y agrupada: muchos cambios de intersección durante un desplazamiento rápido producen un callback con todas las entradas, no uno por elemento. Esto supone una gran mejora de rendimiento frente a los listeners de desplazamiento, que se ejecutan en cada evento de desplazamiento.

Cuando observa un elemento nuevo, el callback se ejecuta una vez casi de inmediato con el estado actual. Esto resulta útil para gestionar elementos que ya son visibles cuando comienza la observación, sin necesidad de una ruta de inicialización especial.

Carga diferida de imágenes, activación de animaciones al desplazarse hasta un elemento, desplazamiento infinito (observe un sentinel cerca del final de la lista), seguimiento de los artículos que el usuario realmente ha leído y alternancia de un encabezado fijo según la visibilidad del hero.

¿Cuál es la diferencia entre threshold: 0 y threshold: 1 en un IntersectionObserver?

IntersectionObserver ejecuta callbacks cuando cambia la visibilidad de un elemento, con agrupación y rendimiento optimizados de forma integrada; utilícelo en lugar de listeners de desplazamiento para la lógica de visibilidad. Configúrelo con threshold (de 0 a 1 o un array), root (un contenedor de desplazamiento personalizado) y rootMargin (para ampliar o reducir el área observada). Use observe/unobserve para elementos concretos y disconnect para limpiar todo.