Rolagem da janelaX
Exemplo 1
Role o conteúdo em 100 pixels e alerte scrollX e scrollY:
window.scrollBy(100, 100);
alert(window.scrollX + window.scrollY);
Mais exemplos abaixo.
Definição e uso
A scrollX
propriedade retorna os pixels que um documento percorreu do canto superior esquerdo da janela.
A scrollX
propriedade é somente leitura.
Observação
A scrollX
propriedade é igual à
pageXOffset
propriedade.
Para compatibilidade entre navegadores, use window.pageXOffset em vez de window.scrollX.
Veja também:
Sintaxe
window.scrollX
ou apenas:
scrollX
Valor de retorno
Modelo | Descrição |
Um número | O número de pixels que o documento rolou a partir do canto superior esquerdo da janela. |
Mais exemplos
Crie uma barra de navegação fixa:
// Get the navbar
const navbar = document.getElementById("navbar");
// Get the offset position of the navbar
const sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove the sticky class when you leave the scroll position.
function myFunction() {
if (window.scrollY >= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
Suporte ao navegador
window.scrollX
é suportado em todos os navegadores:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |