CodeForge

Maquetación Web Dinámica / JavaScript para maquetadores: darle vida al DOM

IntersectionObserver: reaccionar al scroll

Teoría20 min20 XP

Revelar elementos cuando entran en pantalla, cargar imágenes solo cuando se ven, cambiar el navbar al pasar el hero: todo eso necesita saber "¿este elemento está visible?". La forma ingenua —escuchar el evento scroll y medir posiciones— es lenta y torpe. IntersectionObserver lo hace por ti, eficiente y en una API elegante. Es, con razón, apodado el mejor amigo del maquetador.

El vigía que te avisa

El patrón: observar y reaccionar

observer.js
// crear el vigía: una función que corre cuando cambia la visibilidad
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
  if (entry.isIntersecting) {              // ¿entró en pantalla?
    entry.target.classList.add("visible"); // revélalo
    observer.unobserve(entry.target);      // ya está: deja de vigilarlo
  }
});
}, { threshold: 0.2 });   // dispara cuando el 20% del elemento es visible

// ponerle el vigía a cada elemento que quieras observar
document.querySelectorAll(".revelar").forEach((el) => observer.observe(el));

Tres piezas: creas el observer con una función que recibe las entries (los elementos que cambiaron de visibilidad); revisas entry.isIntersecting (¿está visible?); y observe() cada elemento. El unobserve tras revelar es una optimización clave: una vez hecho el efecto, dejas de vigilar. El threshold decide cuánto debe verse para disparar (0.2 = 20%).

Reveal al scroll (con empatía)

Desplázate y mira los bloques aparecer al entrar. Nota el mismo cuidado de siempre: si el usuario pidió prefers-reduced-motion, saltamos el observer y mostramos todo de inmediato — nada de contenido atrapado en opacity: 0 para quien no verá la animación. La lección de empatía del módulo 11, ahora en JavaScript.

Sus otros dos superpoderes

usos.js
// LAZY LOADING: cargar la imagen solo cuando está por verse
const imgObserver = new IntersectionObserver((entries) => {
entries.forEach((e) => {
  if (e.isIntersecting) {
    e.target.src = e.target.dataset.src;   // recién ahora descarga
    imgObserver.unobserve(e.target);
  }
});
});

// NAVBAR que cambia: observa un "centinela" invisible arriba del todo
const navObserver = new IntersectionObserver(([entry]) => {
navbar.classList.toggle("compacto", !entry.isIntersecting);  // fuera del hero → compacto
});

Para reveals SIMPLES, recuerda que el módulo 11 tiene la versión 100% CSS (animation-timeline: view()). ¿Cuándo cada uno? CSS puro si el efecto es decorativo y el soporte alcanza; IntersectionObserver cuando necesitas LÓGICA (cargar datos, disparar un contador, cambiar el navbar) o soporte más amplio. Saber elegir es el criterio que este curso te viene entrenando.

Para un efecto de 'aparecer al hacer scroll' en 50 tarjetas, ¿por qué IntersectionObserver es mejor que escuchar el evento scroll y medir posiciones?

Mini-reto

Dale a "El Observador" dos mejoras con un mismo observer o dos: (1) las tarjetas de noticia aparecen con un fade-up al entrar en pantalla (respetando reduced-motion), y (2) el header se vuelve .compacto (más bajo, con sombra) cuando dejas atrás el título principal —observa un centinela invisible arriba. Dos patrones que verás en el 90% de las landings profesionales.

Qué sigue

Tienes todas las piezas: seleccionar, clases, eventos, delegación, render y scroll. La próxima lección las combina en los PATRONES DE UI clásicos que te van a pedir una y otra vez: modal accesible, tabs, acordeón y dark mode persistente. Tu recetario de interactividad.