Descobrir posição do scroll de um elemento com JS

Neste artigo você vai aprender a como descobrir posição do scroll de um elemento, utilizando JavaScript e de modo simples!

Conteúdo disponível em vídeo:

Fala programador(a), beleza? Bora aprender mais sobre DOM e posição dos elementos na tela!

Para saber a posição do elemento, primeiramente você vai precisar selecioná-lo com algum método de document

Alguns disponíveis:

• getElementsByName;
• getElementById;
• getElementsByClassName;
• querySelector;
• querySelectorAll;

Vamos então criar uma situação hipotética e utilizar algum deles para selecionar o elemento, veja o HTML:

<p class="normal">Olá Mundo</p>
<p class="normal">Olá Mundo 2</p>
<p class="normal">Olá Mundo 3</p>
<p id="posicao">Posição deste elemento</p>

Neste HTML vamos buscar a posição do elemento com id posicao, você deve adaptar para o elemento do seu site

Então vamos selecionar ele com JavaScript:

var p = document.querySelector('#posicao');

posicoes = p.getBoundingClientRect();

console.log(posicoes);

Na primeira linha o elemento foi selecionado, depois utilizamos o método getBoundingClientRect para resgatar todos os dados de posição de um elemneto

Agora na variável posicoes, conforme console.log, diversas informações sobre o mesmo são exibidas em forma de objeto, veja:

[object DOMRect] {
  bottom: 136,
  height: 18,
  left: 8,
  right: 622,
  toJSON: function toJSON() { [native code] },
  top: 118,
  width: 614,
  x: 8,
  y: 118
}

E agora podemos saber a posição do elemento, veja a propriedade top, isso quer dizer que este elemento está a 118px do topo da página

Temos também as suas dimensões, coordenadas e muito mais

Agora você consegue obter a posição de qualquer elemento na tela! 😀

Conclusão

Neste artigo você aprendeu a como descobrir posição do scroll de um elemento

Utilizamos um método de DOM chamado getBoundingClientRect, este método cria um objeto a partir de um elemento

Este objeto contém informações de posição e também tamanho do elemento na tela

Onde você pode resgatar qual a posição exata o mesmo está

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube