Нативный CSS scroll-behavior

Свойство scroll-behavior позволяет управлять поведением прокрутки элементов и окна документа в браузере без использования сторонних библиотек. Оно задаёт, как будет происходить переход к определённой позиции: мгновенно или с плавной анимацией.

html {
  scroll-behavior: smooth;
}

В этом примере включается плавная прокрутка для всего документа. Любые переходы к якорям, скролл по кнопкам или программные методы прокрутки будут выполнены с эффектом сглаживания.

Значения scroll-behavior

  • auto — стандартное поведение браузера. Скролл происходит мгновенно, без анимации.
  • smooth — включается плавная прокрутка. Браузер сам рассчитывает траекторию и скорость движения.
  • inherit — элемент наследует значение от родителя.

Важно: значение smooth не позволяет напрямую управлять скоростью или кривой анимации. Для тонкой настройки потребуется JavaScript.

Применение на элементах

Свойство можно применять не только к тегу html или body, но и к любым блокам с прокруткой:

.scroll-container {
  overflow-y: auto;
  height: 400px;
  scroll-behavior: smooth;
}

В данном примере контейнер .scroll-container прокручивается плавно при вызове методов вроде scrollTo или перехода по якорям внутри блока.

Программная прокрутка с плавным эффектом

Методы JavaScript полностью совместимы с scroll-behavior.

// Прокрутка окна документа
window.scrollTo({
  top: 800,
  beh * avior: "smooth"
});

// Прокрутка конкретного элемента
const container = document.querySelector('.scroll-container');
container.scrollTo({
  top: 200,
  beh * avior: "smooth"
});

Параметр beh * avior: "smooth" дублирует функционал CSS scroll-behavior: smooth, но позволяет задавать его динамически в коде.

Переход к якорям

При использовании ссылок на якоря с включённой плавной прокруткой переход осуществляется автоматически:

<a href="#section3">Перейти к секции 3</a>
...
<div id="section3">Секция 3</div>
html {
  scroll-behavior: smooth;
}

Прокрутка к #section3 будет плавной, без резких прыжков. Если нужно отключить эффект для отдельных ссылок, достаточно переопределить стиль для конкретного блока:

.no-smooth {
  scroll-behavior: auto;
}

Ограничения и поддержка

  1. Скорость и кривые движения нельзя настроить через CSS. Браузер использует встроенные алгоритмы.
  2. Не поддерживается в старых браузерах, таких как IE. Для совместимости требуется JavaScript-полифилл.
  3. Неприменимо к горизонтальной прокрутке у некоторых элементов в старых версиях Safari.
  4. Взаимодействие с JavaScript-полифиллами иногда приводит к конфликтам. В таких случаях лучше отключить нативный smooth и реализовать полностью через JS.

Взаимодействие с библиотеками

Нативный scroll-behavior часто используется вместе с библиотеками Smooth Scroll:

  • Если библиотека реализует свою анимацию, нативный CSS может конфликтовать. Для корректной работы рекомендуется отключать CSS-плавность для элементов, управляемых библиотекой.
  • CSS smooth остаётся полезным для быстрых и простых сценариев — например, переходы по якорям без дополнительного кода.

Примеры продвинутого использования

Плавная прокрутка только внутри модального окна:

.modal-content {
  max-height: 500px;
  overflow-y: auto;
  scroll-behavior: smooth;
}
// Прокрутка к определённому элементу внутри модального окна
const modal = document.querySelector('.modal-content');
const target = modal.querySelector('#target-item');
target.scrollIntoView({ beh * avior: 'smooth' });

Динамическая смена поведения:

const container = document.querySelector('.scroll-container');

// Включить плавность
container.style.scrollBehavior = 'smooth';

// Через 2 секунды вернуть мгновенный скролл
setTimeout(() => {
  container.style.scrollBehavior = 'auto';
}, 2000);

Такой подход позволяет временно использовать плавную анимацию и затем возвращать стандартное поведение.

Нативный CSS scroll-behavior — мощный инструмент для упрощения плавной прокрутки без стороннего кода, особенно для переходов по якорям и прокрутки элементов с overflow. Его простота и поддержка современных браузеров делают его удобным для большинства типовых задач по скроллу.

Оглавление