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 є простим і ефективним інструментом для покращення навігації на вашому веб-сайті. Використовуйте його для створення більш інтуїтивно зрозумілого і зручного користувацького інтерфейсу, особливо на сторінках з великим об'ємом контенту.

правити

Порада

Завжди тестуйте поведінку прокручування на різних пристроях, щоб переконатися, що плавне прокручування дійсно покращує користувацький досвід. Іноді занадто повільне прокручування може дратувати користувачів, тому експериментуйте з різними сценаріями, щоб знайти оптимальний варіант.

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

Порада

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

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

Порада

Будьте обережні з тривалістю анімації прокручування, оскільки надто повільне прокручування може дратувати користувачів. Тестуйте різні значення і шукайте баланс між плавністю і швидкістю, щоб забезпечити оптимальний користувацький досвід. Ви можете використовувати requestAnimationFrame для тонкого налаштування анімації прокручування, якщо стандартні налаштування не підходять для вашого випадку.

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

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

Синтаксис

element.style.scrollBehavior

Переглядачі

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

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

Переглядач
	1	1	3	8	12

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

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

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

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

Приклади

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

<button id="scrollButton">Прокрутити</button>
<div id="targetSection">Демонстраційний елемент</div>

document.getElementById('scrollButton').addEventListener('click', function() {
  const targetSection = document.getElementById('targetSection');
  targetSection.style.scrollBehavior = 'smooth';
  targetSection.scrollIntoView({ behavior: 'smooth' });
});

<img id="imageGallery" src="/img/logo.svg" width="100" alt="Демонстраційне зображення">
<button id="nextButton">Далі</button>
<button id="prevButton">Назад</button>

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;
});