Às vezes, podemos querer obter a posição da barra de rolagem quando estamos rolando em um elemento ou página.

Neste artigo, veremos como obter a posição da barra de rolagem com JavaScript.

Usando a propriedade scrollTop de um elemento

Podemos usar a scrollToppropriedade de um elemento para nos permitir obter o número de pixels ocultos por causa da rolagem.

Portanto, podemos usar isso para obter a posição da barra de rolagem.

Por exemplo, podemos escrever o seguinte HTML:

<div>
</div>

const div = document.querySelector('div')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  div.appendChild(p)
}
window.addEventListener('scroll', (e) => {
  console.log(document.documentElement.scrollTop);
})

Em seguida, adicionamos 100 p elementos ao div chamando document.createElementpara criar os elementos.

E definimos o conteúdo de cada definindo a textContentpropriedade.

Em seguida, o anexamos ao div com o div.appendChildmétodo.

Em seguida, chamamos window.addEventListenercom a 'scroll'string como o primeiro argumento para ouvir o evento scroll.

E então podemos obter a scrollToppropriedade de documentElementpara saber até que ponto o htmlelemento rolou para baixo.

Também podemos obter a scrollToppropriedade de outros elementos.

Por exemplo, se tivermos:

<div style='height: 300px; overflow-y: auto'>
</div>

Então, podemos ouvir o scrollevento do div escrevendo:

const div = document.querySelector('div')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  div.appendChild(p)
}
div.addEventListener('scroll', (e) => {
  console.log(div.scrollTop);
})

Mas chamamos em div.addEventListenervez de window.addEventListenerouvir o scrollevento do div.

Em seguida, obtemos a div.scrollToppropriedade para saber até que ponto o div rolou para baixo.

Usando a propriedade scrollY do objeto janela

Há também a window.scrollYpropriedade que permite ver o quão baixo está a barra de rolagem em pixels.

Por exemplo, podemos usá-lo escrevendo:

const div = document.querySelector('div')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  div.appendChild(p)
}
window.addEventListener('scroll', (e) => {
  console.log(window.scrollY);
})

Conclusão

Existem várias maneiras que podemos usar para obter a posição da barra de rolagem com JavaScript.

Mais conteúdo em plainenglish.io