Atributo scrollY da janela Window

Definição e uso

scrollY Atributo retorna o número de pixels rolados do documento a partir do canto superior esquerdo da janela.

scrollY Atributo é apenas leitura.

Indicação

scrollY Atributo é igual a Atributo pageYOffset atributo.

Para compatibilidade entre navegadores, use window.pageYOffset ao invés de window.scrollY.

Veja também:

Atributo pageXOffset

Atributo pageYOffset

Exemplo

Exemplo 1

Role o conteúdo 100 pixels e mostre scrollX e scrollY:

window.scrollBy(100, 100);
alert(window.scrollX + window.scrollY);

Experimente você mesmo

Exemplo 2

Crie um navbar adesivo:

// Obtenha o navbar
const navbar = document.getElementById("navbar");
// Obtenha a posição deslocada do navbar
const sticky = navbar.offsetTop;
// Adicione a classe sticky ao navbar quando você alcançar sua posição de rolagem. Remova a classe sticky ao sair da posição de rolagem.
function myFunction() {
  if (window.scrollY >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Experimente você mesmo

Sintaxe

window.scrollY

ou:

scrollY

Valor retornado

Tipo Descrição
Número Número de pixels rolados do documento a partir do canto superior esquerdo da janela.

Suporte do navegador

Todos os navegadores suportam window.scrollY:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte 9-11 Suporte Suporte Suporte Suporte