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) для реалізації динамічних ефектів чи анімацій, що залежать від положення на горизонталі.
Порада:	Використовуйте значення `scrollX` для створення адаптивного інтерфейсу, який реагує на прокрутку, змінюючи елементи чи розміщення відповідно до горизонтальної прокрутки.
Порада:	Використовуйте `scrollX` у коді для програмного керування горизонтальною прокруткою. Це корисно при автоматизації плавної прокрутки до конкретного елементу чи положення на сторінці.

Синтаксис

window.scrollX

Значення

Return

Переглядачі

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

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

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

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

// Отримання горизонтальної позиції прокрутки вікна
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';
  }
});

JS довідник

JavaScript

Наповнення JS розділу