JS властивість Object.scrollX

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

scrollX - це властивість об'єкта Window в мові програмування JavaScript, яка надає інформацію про горизонтальну позицію прокрутки вікна. Вона визначає, на скільки пікселів вікно прокручено в горизонтальному напрямку від лівого краю документа.

scrollX дозволяє отримувати чи встановлювати значення горизонтальної прокрутки вікна. Це може бути корисно при створенні веб-сторінок з адаптивним дизайном, де потрібно взаємодіяти з об'єктами або елементами, що реагують на положення прокрутки.

Для отримання значення горизонтальної прокрутки можна використовувати властивість scrollX таким чином:

var horizontalScrollPosition = window.scrollX;
console.log('Horizontal Scroll Position:', horizontalScrollPosition);

Цей код виведе в консоль поточне значення горизонтальної прокрутки вікна. Це може бути корисно при розробці скролл-ефектів або при адаптації відображення контенту.

Також, scrollX можна використовувати для програмного встановлення певного положення прокрутки вікна:

// Прокрутити вікно вправо на 200 пікселів
window.scrollBy(200, 0);

У цьому прикладі метод scrollBy використовується для зміни горизонтального положення прокрутки вікна на 200 пікселів вправо. Це може бути застосовано, наприклад, для автоматичної прокрутки до певного елемента або реалізації анімаційного ефекту.

Ще одним прикладом може бути динамічна зміна властивості стилів елемента в залежності від значення горизонтальної прокрутки:

window.addEventListener('scroll', function() {
    var scrollPosition = window.scrollX;

    // Змінити стиль елемента в залежності від значення горизонтальної прокрутки
    if (scrollPosition > 500) {
        // Додатковий код для зміни стилю
    } else {
        // Додатковий код для іншого стилю
    }
});

У цьому випадку подія скролінгу використовує scrollX для визначення горизонтальної прокрутки та змінює стиль елемента відповідно до цього значення.

З використанням scrollX можна ефективно керувати горизонтальною прокруткою вікна, що відкриває широкі можливості для створення динамічних та інтерактивних веб-додатків.

правити

Порада

Використовуйте scrollX у сполученні з подіями прокрутки (scroll event) для реалізації динамічних ефектів чи анімацій, що залежать від положення на горизонталі.

автор: Bond правити

Порада

Використовуйте значення scrollX для створення адаптивного інтерфейсу, який реагує на прокрутку, змінюючи елементи чи розміщення відповідно до горизонтальної прокрутки.

автор: Bond правити

Порада

Використовуйте scrollX у коді для програмного керування горизонтальною прокруткою. Це корисно при автоматизації плавної прокрутки до конкретного елементу чи положення на сторінці.

автор: Bond правити

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

Синтаксис

window.scrollX

Переглядачі

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

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

Переглядач
	1	1	1	9.6	12

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

Переглядач
	4.4	18	4	1

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

Переглядач
	-	-

Приклади

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

// Отримання горизонтальної позиції прокрутки вікна
let horizontalScrollPosition = window.scrollX;

// Виведення горизонтальної позиції в консоль
console.log(`У цьому прикладі горизонтальна позиція прокрутки: ${horizontalScrollPosition}px.`);

// Додавання події на прокрутку вікна
window.addEventListener('scroll', function() {
  // Отримання горизонтальної позиції прокрутки при кожній прокрутці
  let currentHorizontalScroll = window.scrollX;

  // Зміна кольору фону в залежності від горизонтальної позиції
  if (currentHorizontalScroll > 100) {
    document.body.style.backgroundColor = '#f0f0f0';
  } else {
    document.body.style.backgroundColor = '#ffffff';
  }
});