$cat~/glossario/intersection-observer.md

Intersection Observer

Web Platform

API para detectar visibilidade de elemento no viewport.

intersection-observer.mdmarkdown
01

seção

Explicação

Intersection Observer — API para detectar visibilidade de elemento no viewport.

Callback quando elemento entra/sai do viewport (root). Opções: rootMargin, threshold array.

Substitui scroll listeners pesados para lazy load e analytics viewability.

02

seção

Exemplo

snippetJavaScript
const io = new IntersectionObserver(([entry]) => {  if (entry.isIntersecting) loadImage(entry.target);}, { rootMargin: "100px" });io.observe(img);
03

seção

Modo de uso

  • Lazy load imagens

  • Infinite scroll sentinel

  • Animate on scroll once

04

seção

Armadilhas comuns

  • Unobserve após load evita leak

  • Hidden display none não intersect

05

seção

Termos relacionados