API IntersectionObserver e limiares

IntersectionObserver executa funções de retorno quando um elemento entra ou sai da área visível (ou de outro contêiner de rolagem). É a alternativa moderna e eficiente aos ouvintes de rolagem — o navegador faz os cálculos, e seu código é executado apenas em transições reais de visibilidade.

new IntersectionObserver(callback, options) cria um observador. A função de retorno recebe uma matriz de entradas quando as interseções mudam; as opções controlam qual contêiner é observado e em quais limiares.

Cada entry possui target (o elemento observado), isIntersecting (booleano), intersectionRatio (de 0 a 1), boundingClientRect, intersectionRect e time. Use isIntersecting para verificações binárias de visibilidade; intersectionRatio para lógica baseada no percentual visível.

{ threshold: 0.5 } executa a função de retorno sempre que a razão de interseção ultrapassa 50%. Use uma matriz [0, 0.25, 0.5, 0.75, 1] para executar a função em cada quarto — útil para criar indicadores de progresso ou análises que informem a "% visível".

Por padrão, o observador mede a interseção com a área visível. Defina root: someScrollableDiv para medir em relação a um contêiner de rolagem interno — por exemplo, uma lista virtualizada dentro de um elemento com altura fixa.

rootMargin: "200px" aumenta a área observada em 200 pixels de cada lado. Use-o para disparar antes (começar a carregar imagens 200 pixels antes de entrarem na área visível) ou depois (disparar apenas quando tiverem passado totalmente pela área visível).

observer.observe(element) inicia o monitoramento de um elemento; observer.unobserve(element) o interrompe. Sempre deixe de observar quando não precisar mais da função de retorno (por exemplo, depois que o carregamento sob demanda for acionado uma vez), para liberar memória.

observer.disconnect() interrompe o monitoramento de todos os elementos observados. Chame-o quando o componente for desmontado ou quando o observador não for mais necessário — isso evita vazamentos causados por observadores que permaneçam ativos além do caso de uso.

As funções de retorno são entregues de forma assíncrona e agrupada — muitas mudanças de interseção durante uma rolagem rápida geram uma única chamada de retorno com todas as entradas, não uma por elemento. Isso representa um grande ganho de desempenho em comparação com ouvintes de rolagem, que são acionados em cada evento de rolagem.

Quando um novo elemento é observado, a função de retorno é executada uma vez quase imediatamente com o estado atual — isso é útil para lidar com elementos que já estão visíveis no momento em que a observação começa, sem um caminho especial de inicialização.

Carregamento sob demanda de imagens, acionamento de animações quando entram na área visível durante a rolagem, rolagem infinita (observe um sentinel próximo ao fim da lista), acompanhamento de quais artigos o usuário realmente leu e alternância de cabeçalho fixo com base na visibilidade do elemento principal.

Qual é a diferença entre limiar: 0 e limiar: 1 em um IntersectionObserver?

IntersectionObserver executa funções de retorno nas transições de visibilidade dos elementos, com desempenho e agrupamento integrados — substitua os ouvintes de rolagem por ele para implementar lógica de visibilidade. Configure-o com um limiar (de 0 a 1 ou uma matriz), uma raiz (contêiner de rolagem personalizado) e rootMargin (para aumentar ou reduzir a área observada). Use observe/unobserve em elementos específicos; a desconexão limpa tudo.