JS властивість CSSStyleDeclaration.scrollBehavior
Загальний опис
element.style.scrollBehavior - це властивість Javascript, яка визначає, як прокручування елемента повинно відбуватися: миттєво або плавно. Використовується для налаштування поведінки прокручування всередині елемента при виконанні JavaScript-кодів або навігації по внутрішніх посиланнях.
Властивість scrollBehavior може приймати два значення: auto та smooth. Значення auto означає миттєве прокручування без анімації, а значення smooth забезпечує плавне анімоване прокручування. Ця властивість може бути корисною для покращення користувацького досвіду, особливо на сторінках з довгими списками або великим об'ємом контенту, де плавне прокручування може зробити навігацію більш природною і зручною.
Використання
Щоб встановити плавне прокручування для певного елемента, достатньо задати йому відповідну властивість через JavaScript:
const element = document.getElementById('myElement');
element.style.scrollBehavior = 'smooth';
Після цього всі операції прокручування для цього елемента будуть виконуватись плавно.
Приклади
Плавне прокручування до кінця елемента:
const container = document.getElementById('scrollableContainer');
container.style.scrollBehavior = 'smooth';
container.scrollTop = container.scrollHeight;
В цьому прикладі властивість scrollBehavior встановлюється для елемента з ідентифікатором scrollableContainer, а потім відбувається плавне прокручування до нижньої частини цього елемента.
Плавне прокручування до певного елемента всередині контейнера:
const container = document.getElementById('scrollableContainer');
const targetElement = document.getElementById('targetElement');
container.style.scrollBehavior = 'smooth';
targetElement.scrollIntoView();
В цьому прикладі використовується метод scrollIntoView, який автоматично прокручує контейнер так, щоб виділити на екрані певний елемент. Завдяки scrollBehavior: smooth це прокручування відбувається плавно.
element.style.scrollBehavior є простим і ефективним інструментом для покращення навігації на вашому веб-сайті. Використовуйте його для створення більш інтуїтивно зрозумілого і зручного користувацького інтерфейсу, особливо на сторінках з великим об'ємом контенту.
| Порада: | Завжди тестуйте поведінку прокручування на різних пристроях, щоб переконатися, що плавне прокручування дійсно покращує користувацький досвід. Іноді занадто повільне прокручування може дратувати користувачів, тому експериментуйте з різними сценаріями, щоб знайти оптимальний варіант. |
| Порада: | Сучасні браузери здебільшого підтримують |
| Порада: | Будьте обережні з тривалістю анімації прокручування, оскільки надто повільне прокручування може дратувати користувачів. Тестуйте різні значення і шукайте баланс між плавністю і швидкістю, щоб забезпечити оптимальний користувацький досвід. Ви можете використовувати |
Синтаксис
element.style.scrollBehaviorЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі створюється довгий контейнер з трьома розділами: верхнім, середнім і нижнім. Користувач може натискати на кнопки "Прокрутити вгору", "Прокрутити до середини" і "Прокрутити вниз", щоб плавно прокручуватися до відповідних розділів. Властивість scrollBehavior: smooth забезпечує плавне прокручування, що покращує користувацький досвід при навігації всередині контейнера.
У цьому прикладі ми додаємо обробник подій на кнопку, який при натисканні прокручує сторінку до певного розділу з ідентифікатором targetSection. Використання scrollBehavior: smooth забезпечує плавне анімоване прокручування, що робить перехід між розділами сторінки більш плавним і приємним для користувачів.
document.getElementById('scrollButton').addEventListener('click', function() {
const targetSection = document.getElementById('targetSection');
targetSection.style.scrollBehavior = 'smooth';
targetSection.scrollIntoView({ behavior: 'smooth' });
});
Цей приклад демонструє, як можна реалізувати плавне горизонтальне прокручування для галереї зображень. Користувач може натискати на кнопки "Наступне" та "Попереднє", щоб прокручувати галерею на 300 пікселів вправо або вліво. Завдяки властивості scrollBehavior: smooth прокручування відбувається плавно, що покращує візуальне сприйняття галереї і робить її взаємодію більш інтуїтивною.
const gallery = document.getElementById('imageGallery');
const nextButton = document.getElementById('nextButton');
const prevButton = document.getElementById('prevButton');
gallery.style.scrollBehavior = 'smooth';
nextButton.addEventListener('click', function() {
gallery.scrollLeft += 300;
});
prevButton.addEventListener('click', function() {
gallery.scrollLeft -= 300;
});