JS властивість Element.scrollLeft

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

Element.scrollLeft - це властивість в JavaScript, яка повертає або встановлює горизонтальну прокрутку елемента у пікселях. Вона дозволяє отримати інформацію про поточну позицію прокрутки елемента або змінити її програмно. Ця властивість є особливо корисною для роботи з елементами, що мають властивість overflow зі значенням auto або scroll, оскільки вона дозволяє керувати їхньою прокруткою.

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

const element = document.getElementById('myElement');
const currentScrollLeft = element.scrollLeft;
console.log(currentScrollLeft); // Виведе поточне значення scrollLeft

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

const element = document.getElementById('myElement');
element.scrollLeft = 100; // Прокручує елемент на 100 пікселів вправо

Властивість scrollLeft часто використовується у поєднанні з іншими властивостями, такими як scrollWidth, clientWidth та offsetWidth, для реалізації різноманітних функцій прокрутки. Наприклад, ви можете прокрутити елемент до його кінця за допомогою такого коду:

const element = document.getElementById('myElement');
element.scrollLeft = element.scrollWidth - element.clientWidth;

У цьому прикладі scrollWidth - це повна ширина вмісту елемента, clientWidth - це ширина видимої області елемента, а їхня різниця дає максимальну позицію горизонтальної прокрутки.

Властивість scrollLeft також можна використовувати у поєднанні з подіями, такими як scroll або resize, для реалізації динамічної поведінки прокрутки. Наприклад, ви можете відстежувати події scroll та виконувати певні дії, коли користувач прокручує елемент:

const element = document.getElementById('myElement');

element.addEventListener('scroll', () => {
  console.log('Поточна позиція горизонтальної прокрутки:', element.scrollLeft);
});

Крім того, властивість scrollLeft може бути корисною для забезпечення доступності веб-сторінок. Наприклад, ви можете автоматично прокручувати елемент до певної позиції після завантаження сторінки або після виконання певної дії користувачем, щоб полегшити навігацію для користувачів з обмеженими можливостями або тих, хто використовує допоміжні технології.

Загалом, Element.scrollLeft є потужним інструментом для керування горизонтальною прокруткою елементів на веб-сторінках. Її можна використовувати для отримання поточної позиції прокрутки, встановлення нової позиції або реалізації різноманітних функцій прокрутки у поєднанні з іншими властивостями та подіями JavaScript.

правити

Порада

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

const element = document.getElementById('myElement');
element.scrollLeft = 200; // Прокручує елемент на 200 пікселів вправо

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

Порада

Використовуйте властивість scrollLeft у поєднанні з іншими властивостями, такими як scrollWidth, clientWidth та offsetWidth, для реалізації більш складних функцій прокрутки. Наприклад, ви можете прокрутити елемент до його кінця за допомогою такого коду:

const element = document.getElementById('myElement');
element.scrollLeft = element.scrollWidth - element.clientWidth;

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

Порада

Відстежуйте події scroll або resize та використовуйте властивість scrollLeft для реалізації динамічної поведінки прокрутки. Наприклад, ви можете виконувати певні дії, коли користувач прокручує елемент:

const element = document.getElementById('myElement');

element.addEventListener('scroll', () => {
  console.log('Поточна позиція горизонтальної прокрутки:', element.scrollLeft);
  // Виконати додаткові дії на основі позиції прокрутки
});

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

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

Синтаксис

Element.scrollLeft

Переглядачі

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

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

Переглядач
	86	1	1	8	86

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

Переглядач
	86	86	4	1

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

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

Приклади

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

<div id="container" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>
<button id="scrollLeftBtn">Прокрутити</button>
<button id="scrollRightBtn">Прокрутити</button>

.scroll-demo {
    width: 220px;
    height: 110px;
    overflow: auto;
    border: 1px solid #0172ad;
}

.scroll-inner {
    width: 600px;
    height: 400px;
    background: linear-gradient(135deg, #eef6ff, #0172ad);
    padding: 8px;
}

const container = document.getElementById('container');
const scrollLeftBtn = document.getElementById('scrollLeftBtn');
const scrollRightBtn = document.getElementById('scrollRightBtn');

scrollLeftBtn.addEventListener('click', () => {
  container.scrollLeft -= 100; // Прокручуємо вліво на 100 пікселів
});

scrollRightBtn.addEventListener('click', () => {
  container.scrollLeft += 100; // Прокручуємо вправо на 100 пікселів
});

<div id="container" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>
<button id="startAutoScrollBtn">Старт</button>
<button id="stopAutoScrollBtn">Стоп</button>

.scroll-demo {
    width: 220px;
    height: 110px;
    overflow: auto;
    border: 1px solid #0172ad;
}

.scroll-inner {
    width: 600px;
    height: 400px;
    background: linear-gradient(135deg, #eef6ff, #0172ad);
    padding: 8px;
}

const container = document.getElementById('container');
const startAutoScrollBtn = document.getElementById('startAutoScrollBtn');
const stopAutoScrollBtn = document.getElementById('stopAutoScrollBtn');

let autoScrollInterval;

const autoScroll = () => {
  container.scrollLeft += 1; // Прокручуємо вправо на 1 піксель

  // Перевіряємо, чи ми досягли кінця вмісту
  if (container.scrollLeft + container.offsetWidth >= container.scrollWidth) {
    clearInterval(autoScrollInterval); // Зупиняємо автоматичну прокрутку
  }
};

startAutoScrollBtn.addEventListener('click', () => {
  autoScrollInterval = setInterval(autoScroll, 20); // Запускаємо автоматичну прокрутку кожні 20 мілісекунд
});

stopAutoScrollBtn.addEventListener('click', () => {
  clearInterval(autoScrollInterval); // Зупиняємо автоматичну прокрутку
});