Desplazamiento de la ventanaX
Ejemplo 1
Desplace el contenido 100 píxeles y avise a scrollX y scrollY:
window.scrollBy(100, 100);
alert(window.scrollX + window.scrollY);
Más ejemplos a continuación.
Definición y uso
La scrollX
propiedad devuelve los píxeles que un documento ha desplazado desde la esquina superior izquierda de la ventana.
La scrollX
propiedad es de solo lectura.
Nota
La scrollX
propiedad es igual a la
pageXOffset
propiedad.
Para compatibilidad entre navegadores, use window.pageXOffset en lugar de window.scrollX.
Ver también:
Sintaxis
window.scrollX
o solo:
scrollX
Valor devuelto
Escribe | Descripción |
Un número | El número de píxeles que el documento se ha desplazado desde la esquina superior izquierda de la ventana. |
Más ejemplos
Cree una barra de navegación pegajosa:
// 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");
}
}
Compatibilidad con navegador
window.scrollX
es compatible con todos los navegadores:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |