JavaScript scrollX — позиція горизонтальної прокрутки

Властивість scrollX показує, на скільки пікселів сторінку прокручено вбік.

правити

Загальний опис

На добре зробленому сайті вона майже завжди дорівнює нулю: горизонтальна прокрутка всієї сторінки — це зазвичай баг макета, а не задум. Щось вилізло за межі — широка таблиця, зображення без max-width, від'ємний відступ.

Тому найкорисніше застосування scrollX — діагностика: перевірити, чи не з'їхала сторінка вбік на вузьких екранах.

Справжня горизонтальна прокрутка (каруселі, широкі таблиці) живе всередині контейнерів, і там читають element.scrollLeft, а не scrollX.

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
scrollX	1+	1+	1+	3+	12+	9+

Підтримка: мобільні переглядачі

Переглядач
scrollX	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

console.log(window.scrollX); // на здоровій сторінці — 0

// діагностика: хто виліз за межі екрана?
if (document.documentElement.scrollWidth > window.innerWidth) {
    for (const el of document.querySelectorAll('*')) {
        if (el.getBoundingClientRect().right > window.innerWidth) {
            console.warn('Виліз за межі:', el);
        }
    }
}