Recomendações de cursos:

Atributo scrollX da janela Window

scrollX Definição e uso

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

Atributo

scrollX Atributo é só leitura. Atributo pageXOffset propriedade.

Para compatibilidade cross-browser, use o atributo window.pageXOffset ao invés de window.scrollX.

Veja também:

Atributo pageXOffset

Atributo pageYOffset

Exemplo

Exemplo 1

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

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

Experimente pessoalmente

Exemplo 2

Crie um navbar adesivo:

// Obtenha o navbar
const navbar = document.getElementById("navbar");
// Obtenha a posição de deslocamento 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 pessoalmente

Sintaxe

window.scrollX

ou:

scrollX

Valor de retorno

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

Suporte de navegador

Todos os navegadores suportam window.scrollX:

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