Aquí vamos a ver cómo detectar cuando un elemento está visible en el viewport, es muy útil para ejecutar animaciones u funciones, es muy interesante. Para lograrlo de forma óptima, hoy en día existe una alternativa nativa en JavaScript mucho más eficiente que el clásico evento de scroll: la API Intersection Observer.

En el canal Código Facilito, abordan esta herramienta a través de un tutorial práctico enfocado en mejorar el rendimiento y la experiencia de usuario. A continuación, se detallan los puntos clave y técnicos explicados en el video:

⚙️ Funcionamiento técnico de la API

• Instanciación y Configuración: El proceso inicia creando un new IntersectionObserver(). Este constructor recibe un callback (la función que se ejecuta al haber cambios de visibilidad) y un objeto opcional de configuración (root, rootMargin, threshold). Si no se definen estas opciones, el navegador toma por defecto la ventana activa (viewport).

• Propiedad Clave (isIntersecting): Dentro del callback, se evalúa el arreglo de elementos observados. La propiedad booleana isIntersecting es la encargada de devolver true si el elemento está visible en pantalla o false si ha salido de ella.

• Vinculación: Con el método .observe(elemento), se le indica formalmente al observer qué componente del DOM debe vigilar de forma continua.

 

Anexos

• handleIntersection.zip