IntersectionObserver para efeitos acionados pela rolagem

A API IntersectionObserver monitora com eficiência se um ou mais elementos entram ou saem da área visível do navegador (ou de um elemento ancestral especificado). Diferentemente dos ouvintes de rolagem, que são acionados a cada pixel, o observador chama seu retorno de chamada somente quando o elemento ultrapassa um limiar, o que proporciona um desempenho muito melhor para efeitos baseados em rolagem.

O retorno de chamada recebe uma matriz de objetos IntersectionObserverEntry, um para cada elemento observado. Cada entrada tem um booleano isIntersecting (verdadeiro quando está visível) e um número intersectionRatio entre 0 e 1 (a fração do elemento que está visível no momento). Use esses valores para determinar o estado de visibilidade.

Crie o observador dentro de um useEffect e chame observer.observe(ref.current) para começar a observar o elemento. A referência deve estar anexada ao elemento DOM que você deseja acompanhar. Crie o observador depois que o componente for montado, para que ref.current esteja preenchido.

Na função de limpeza de useEffect, chame observer.unobserve(element) para parar de observar um elemento específico ou observer.disconnect() para interromper todas as observações. Esquecer a limpeza faz com que o observador continue existindo depois que o componente for desmontado, podendo causar erros ou vazamentos de memória.

A opção threshold controla quando o retorno de chamada é disparado. Um valor de 0 é acionado assim que qualquer pixel do elemento fica visível. Um valor de 1 é acionado somente quando o elemento está totalmente visível. Você também pode passar uma matriz como [0, 0.5, 1] para receber retornos de chamada em vários níveis de visibilidade.

rootMargin amplia ou reduz a área efetiva de interseção usando uma sintaxe semelhante à do CSS: '100px 0px' é acionado 100px antes de o elemento entrar na área visível. Use '-100px' para acionar somente quando o elemento estiver 100px dentro da área visível. Isso é útil para pré-carregar conteúdo ou iniciar uma animação antes que o elemento esteja totalmente visível.

Para carregar imagens sob demanda, defina inicialmente um atributo data-src em vez de src. Quando o observador for acionado com isIntersecting: true, copie data-src para src para iniciar a solicitação de rede. Em seguida, chame observer.unobserve(entry.target), pois a imagem só precisa ser carregada uma vez.

Para animações de aparecimento gradual, adicione uma classe CSS quando isIntersecting se tornar verdadeiro: element.classList.add('visible'). Defina a transição em CSS: .card { opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s; } e .card.visible { opacity: 1; transform: none; }. O observador aciona o efeito com eficiência.

IntersectionObserver é ideal para acompanhar visualizações. Quando um elemento com o atributo data-analytics-id se torna visível com um limiar de 0.5, dispare um evento de análise. Isso mede com precisão quais seções do conteúdo os usuários realmente leem, sendo muito mais confiável do que uma simples porcentagem da profundidade da rolagem.

Uma única instância de IntersectionObserver pode observar vários elementos chamando observer.observe(element) para cada um deles. Todos os elementos observados compartilham a mesma função de retorno e as mesmas opções. Use entry.target dentro da função de retorno para identificar qual elemento acionou a notificação.

Um gancho reutilizável useInView retorna [ref, inView]. Anexe ref a qualquer elemento e leia inView para saber se ele está visível no momento. O gancho aceita um objeto de options para definir o limiar e rootMargin. Essa abstração torna os efeitos de rolagem declarativos em qualquer componente.

O que significa um limiar de IntersectionObserver igual a 0?

IntersectionObserver acompanha com eficiência a visibilidade dos elementos usando isIntersecting e intersectionRatio. Sempre faça a limpeza com unobserve ou disconnect. Use threshold para controlar o ponto de acionamento e rootMargin para ampliar a zona de detecção. Use-o para carregamento sob demanda, animações e acompanhamento de análises.