-1

Estou querendo adquirir a porcentagem que meu scroll está, para manipular css. Porém tenho essas duas variaveis:

document.documentElement.scrollTop; document.documentElement.scrollHeight;

A primeira me dá a posição do scroll, e a segunda me dá o tamanho do scroll. Fechou, agora eu só preciso dividir pos/height pra ter a porcentagem do scroll, porém no que percebi a variavel document.documentElement.scrollTop; quando meu scroll está no final, não dá o mesmo valor que document.documentElement.scrollHeight;, ou seja minha porcentagem nunca irá chegar a 100% se eu usar esse cálculo.

Pelo que percebi o document.documentElement.scrollTop; não chega no final de fato porque a posição é pega apenas no topo da tela. A uma maneira de eu fazer essa porcentangem de maneira melhor, tipo pegar o tamanho real do scroll?

2
  • Como scrollTop marca a posição do topo do viewport, nunca chegará a 100%. Para que seu cálculo funcione basta ajustar o seu valor total, ou seja, seu valor total é o tamanho do scroll menos o tamanho da página (que seria a maior posição que scrollTop pode ter). É um problema mais matemático do que de programação, o cálculo ficaria: 100 * scroll_atual / (scroll_total - tamanho_tela) Commented 26/09/2019 às 12:58
  • Acho que isso pode te ajudar pt.stackoverflow.com/questions/312511/…
    – hugocsl
    Commented 26/09/2019 às 13:02

1 Resposta 1

4

Transformei o comentário em resposta, dessa maneira posso postar um exemplo.


Como scrollTop marca a posição do topo do viewport, nunca chegará a 100%.

Para que seu cálculo funcione basta ajustar o seu valor total, ou seja, seu valor total é o tamanho do scroll menos o tamanho da página (que seria a maior posição que scrollTop pode ter).

É um problema mais matemático do que de programação, o cálculo ficaria:

100 * scroll_atual / (scroll_total - tamanho_tela)

Exemplo

let elem = document.getElementById('perc')
let doc = document.documentElement

window.addEventListener('scroll', function() {
    let value = parseInt(100 * doc.scrollTop / (doc.scrollHeight - doc.clientHeight))
    elem.innerHTML = value + '%'
})
body {
  height: 1000px;
  position: relative;
}

#perc {
  position: fixed;
  top: 10px;
  left: 10px;
  color: white;
  background-color: tomato;
  padding: 5px;
}
<span id="perc">0%</span>


Performance

Lembrando que eventos como scroll e resize são disparados muitas vezes por segundo. Então você quer (ou deveria querer) controlar quantas vezes estes evento podem ser disparados.

Para entender melhor pesquise sobre throttle e debounce de eventos.

3
  • Até salvei nos favoritos :D
    – hugocsl
    Commented 26/09/2019 às 13:22
  • 1
    Opa, que honra! :D Commented 26/09/2019 às 13:23
  • Agora olha esse aqui, sem JS, só com CSS codepen.io/una/pen/bwrEpZ não é igual nem tem muito a ver com detectar posição do scroll em si, mas é muito massa!
    – hugocsl
    Commented 26/09/2019 às 13:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .