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!