📖
Browser

IntersectionObserver

API nativa que detecta quando elemento entra ou sai do viewport. Eficiente, sem scroll listener.

📚 O que é

Observa elementos DOM e chama callback quando visibilidade muda. Threshold configura quanto do elemento precisa estar visível. Muito mais performático que window.addEventListener('scroll') com getBoundingClientRect().

✅ Quando usar

Lazy loading de imagens. Infinite scroll. Animações on-scroll. Analytics de visibilidade. Virtualization manual.

🚫 Quando NÃO usar

Quando IntersectionObserver API não está disponível (legado — mas suporte é >96%). Para detecção de scroll position exata.

👍 Prós
Nativo e eficiente
Sem scroll listeners pesados
Configurável (threshold, root)
Async — não bloqueia main thread
👎 Contras
Async — não é pixel-perfect
Não dá posição exata do scroll
Não disponível em SSR
🔗 Termos relacionados