Verificar se elemento está visível com IntersectionObserver do JavaScript

4d atrás

Ion

---

0 0

Vamos utilizar o IntersectionObserver do #JavaScript para verificar se um elemento está visível na tela ou se está fora da área visível.

Primeiro, vamos adicionar no HTML o elemento que nós queremos observar:

<div></div>

div {
	background-color: lightblue;
	height: 100px;
	margin: 1000px auto;
	width: 100px;
}

Agora vamos adicionar o observador:

const observer = new IntersectionObserver(entries => {
	console.log('Está visível?', entries[0].isIntersecting);
});

E começar a observar o elemento selecionado:

observer.observe(document.querySelector('div'));

Com o código acima, toda vez que o elemento mudar sua visibilidade (entrar ou sair da tela), o observador mostrará uma mensagem no console.

Veja o código completo e teste abaixo: