JavaScript Academy · Aula

Observando a visibilidade dos elementos

Crie um observador e acompanhe os elementos.

Observando a visibilidade dos elementos é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Por que usar o observador de interseções

Tradicionalmente, detectar quando um elemento entra na janela de visualização significava escutar scroll e chamar getBoundingClientRect continuamente, o que é lento e causa travamentos.

A API de observação de interseções acompanha a visibilidade de forma eficiente e assíncrona, fora da linha principal de execução.

Criando um observador

Você cria um observador com new IntersectionObserver(callback). O retorno de chamada é executado sempre que a visibilidade de um elemento observado ultrapassa um limiar.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    console.log(entry.target, entry.isIntersecting);
  });
});

Observando um elemento

Chame observer.observe(element) para começar a observar um alvo. Um único observador pode acompanhar vários elementos.

const box = document.querySelector('.box');
observer.observe(box);

// Watch several at once:
document.querySelectorAll('.card')
  .forEach(el => observer.observe(el));

O sinalizador isIntersecting

Cada entrada tem um valor booleano isIntersecting que informa se o alvo atualmente se sobrepõe à root, que por padrão é a janela de visualização.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('element is now visible');
    }
  });
});

Detalhes da entrada

Cada IntersectionObserverEntry contém dados úteis:

target — o elemento observado
isIntersecting — se ele atravessa a root
intersectionRatio — quanto está visível (de 0 a 1)
boundingClientRect — o retângulo do alvo

(entries) => {
  entries.forEach(e => {
    console.log('visible portion:', e.intersectionRatio);
  });
}

A opção de limiar

A opção threshold controla em quais proporções de visibilidade a função de retorno é acionada. 0 é acionado assim que um pixel fica visível; 1 somente quando fica totalmente visível.

const observer = new IntersectionObserver(callback, {
  threshold: 0.5 // fire when 50% visible
});

// You can pass an array for multiple steps:
// threshold: [0, 0.25, 0.5, 0.75, 1]

A opção de raiz

Por padrão, o observer mede em relação à área de visualização do navegador. Defina root como um elemento ancestral rolável para medir a visibilidade dentro desse contêiner.

const list = document.querySelector('.scroll-area');
const observer = new IntersectionObserver(callback, {
  root: list // measure visibility inside this container
});

A opção rootMargin

rootMargin aumenta ou reduz a caixa delimitadora da raiz, como as margens de CSS. Valores positivos acionam a função de retorno mais cedo (antes que o elemento esteja realmente na tela).

const observer = new IntersectionObserver(callback, {
  rootMargin: '200px' // start reacting 200px before visible
});

Interrompendo a observação

Chame observer.unobserve(element) para deixar de acompanhar um elemento, ou observer.disconnect() para parar de acompanhar todos eles. Isso é importante para a limpeza e para gatilhos de execução única.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      doSomething(entry.target);
      observer.unobserve(entry.target); // fire once
    }
  });
});

Por que é eficiente

O navegador calcula as interseções internamente e agrupa as notificações, em vez de executar seu JavaScript a cada quadro de rolagem. Isso evita recalculamentos excessivos do layout e mantém a rolagem fluida mesmo com muitos elementos-alvo.

Casos de uso comuns

O observer de interseção é usado em muitos recursos reais:

Carregamento sob demanda de imagens e quadros incorporados
Rolagem infinita
Animações acionadas pela rolagem
Acompanhamento de impressões de anúncios ou conteúdo

Vamos criar vários deles a seguir.

Verificação rápida

Teste sua compreensão dos conceitos básicos do observer de interseção.

Recapitulação

Você aprendeu os conceitos básicos do observer de interseção:

new IntersectionObserver(callback, options) cria um.
observe inicia o acompanhamento; unobserve/disconnect o interrompem.
Cada entrada disponibiliza isIntersecting e intersectionRatio.
threshold, root e rootMargin ajustam quando ele é acionado.
Ele é muito mais eficiente do que ouvintes de rolagem.

Agora, vamos carregar imagens sob demanda com ele.

Perguntas Frequentes

A aula “Observando a visibilidade dos elementos” é grátis?

Sim — o texto completo de “Observando a visibilidade dos elementos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Observando a visibilidade dos elementos”?

Crie um observador e acompanhe os elementos. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Observando a visibilidade dos elementos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy