Atributo scrollX de la ventana

Definición y uso

scrollX Atributo que devuelve los píxeles desplazados desde la esquina superior izquierda de la ventana.

scrollX Es de solo lectura.

Atributo

scrollX Atributo es de solo lectura. pageXOffset Atributo

Para la compatibilidad entre navegadores, utilice el atributo window.pageXOffset En lugar de window.scrollX.

Vea también:

Atributo pageXOffset

Atributo pageYOffset

Ejemplo

Ejemplo 1

Desplace el contenido 100 píxeles y avise sobre scrollX y scrollY:

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

Intente hacerlo usted mismo

Ejemplo 2

Crear una barra de navegación adhesiva:

// Obtener la barra de navegación
const navbar = document.getElementById("navbar");
// Obtener la posición desplazada de la barra de navegación
const sticky = navbar.offsetTop;
// Al llegar a la posición de desplazamiento, añada la clase 'sticky' a la barra de navegación. Elimínela cuando salga de la posición de desplazamiento.
function myFunction() {
  if (window.scrollY >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Intente hacerlo usted mismo

Sintaxis

window.scrollX

O bien:

scrollX

Valor devuelto

Tipo Descripción
Número El número de píxeles desplazados desde la esquina superior izquierda de la ventana.

Compatibilidad del navegador

Todos los navegadores lo admiten window.scrollX:

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