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.
| Порада: | Встановлюйте нове значення властивості |
| Порада: | Використовуйте властивість |
| Порада: | Відстежуйте події |
Синтаксис
Element.scrollLeftЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
86 |
1 |
1 |
8 |
86 |
| Переглядач | ||||
|---|---|---|---|---|
86 |
86 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми маємо широкий контейнер з вмістом (наприклад, зображенням або таблицею), який не вміщається на екрані. Контейнер має властивість overflow-x: auto, що дозволяє горизонтальну прокрутку, коли вміст виходить за межі контейнера.
Користувач може прокручувати вміст вліво або вправо, натискаючи відповідні кнопки.
У цьому прикладі ми використовуємо властивість scrollLeft для горизонтального прокручування елемента з великим вмістом. Це може бути корисно для відображення широких таблиць або зображень, які не вміщаються на екрані.
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 пікселів
});У цьому складнішому прикладі ми створюємо функцію, яка автоматично прокручує елемент до кінця його вмісту. Це може бути корисно для створення анімованого ефекту прокрутки або для реалізації функціональності типу "Автоматична прокрутка новин".
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); // Зупиняємо автоматичну прокрутку
});