Como verificar se elemento está visível ao scrollar em JavaScript

Neste artigo você aprenderá a verificar se elemento está visível ao scrollar, ou seja, quando o usuário ativar o scroll, verificamos se um elemento está visível

Fala programador(a), beleza? Bora aprender mais sobre posicionamento de elementos, scroll e também JavaScript!

Primeiramente precisaremos selecionar o elemento com algum método de DOM

Desta maneira será possível acessar as suas posições, com o método getBoundingClientRect

Vamos extrair as posições do topo e também do fim do elemento, então o scroll funciona das duas maneiras

Ou seja, indo para cima ou para baixo

Depois disso é só validar se o elemento está presente na janela

Para cima validamos se o top é maior ou igual a 0

E para baixo, validamos se o elemento é menor ou igual a altura atual da janela

Veja um exemplo prático do código necessário:

<p id="meu-paragrafo">Meu texto</p>

Este será nosso elemento alvo no HTML

Agora o código JS:

const p = document.querySelector("#meu-paragrafo")

function estaVisivel(el) {

    const posicoes = el.getBoundingClientRect();
    const inicio = posicoes.top;
    const fim = posicoes.bottom;

    let estaVisivel = false
    
    if((inicio >= 0) && (fim <= window.innerHeight)) {
			estaVisivel = true;
    }
    
    return estaVisivel;
    
}

console.log(estaVisivel(p))

Conforme explicado anteriormente, selecionamos o elemento primeiro

A função é criada posteriormente, mas a ordem não importa

Depois dentro dela, é feita a validação do posicionamento do elemento, conforme os critérios já explicados

Se for verdadeiro, temos o elemento dentro da tela e é retornado positivo

Caso não, um retorno de false é o que receberemos

Note que é preciso invocar a função com o elemento selecionado como parâmetro

E também você deve adaptar ao seu evento, para satisfazer a regra de negócios da sua aplicação

Conclusão

Neste artigo você aprendeu a verificar se elemento está visível ao scrollar com JavaScript puro

Basicamente criamos uma validação das posições do elemento

Que caso se encaixem na tela, teremos um retorno de true

Caso não, o retorno da função é false

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!