Свойство scrollX окна

Определение и использование

scrollX Атрибут возвращает количество пикселей,滚动的文档从窗口左上角。

scrollX Атрибут является только для чтения.

указатель

scrollX равен Атрибут pageXOffset атрибут.

Для跨浏览器兼容性，请使用 window.pageXOffset вместо window.scrollX.

См. также:

Атрибут pageXOffset

Атрибут pageYOffset

Пример

Пример 1

Прокрутите содержимое на 100 пикселей и покажите scrollX и scrollY:

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

Попробуйте сами

Пример 2

Создание sticky навигационной панели:

// Получите навигационную панель
const navbar = document.getElementById("navbar");
// Получите положение навигационной панели
const sticky = navbar.offsetTop;
// Когда вы достигаете места прокрутки, добавьте класс sticky к навигационной панели. Удалите класс sticky, когда вы离开 место прокрутки.
function myFunction() {
  if (window.scrollY >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Попробуйте сами

Синтаксис

window.scrollX

Или:

scrollX

Возвратное значение

Тип Описание
Число Количество пикселей,滚动的文档从窗口左上角。

Поддержка браузерами

Все браузеры поддерживают window.scrollX:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка