Время для прочтения: 1 мин. 25 сек.

Плавная прокрутка при помощи scroll-behavior

В ночных сборках Firefox Nightly и Google Chrome появилась поддержка эксперименатального CSS-свойства scroll-behavior, которое предназначено для задания плавной прокрутки внутри любого элемента.

Возможные значения scroll-behavior

Значение Описание
auto На усмотрение браузера
instant Мгновенная прокрутка
smooth Плавная прокрутка

Как включить плавную прокрутку в Firefox

Перейдите на страницу конфигурации вашего браузера about:config и установите в значение true свойство layout.css.scroll-behavior.enabled.

Как включить плавную прокрутку в Google Chrome

Перейдите на страницу конфигурации вашего браузера chrome://flags и установите в значение true свойство Smooth Scrolling или Enable experimental web platform features.

Задание scroll-behavior через CSS

Для элемента, в котором нужна плавная прокрутка, просто укажите свойство:


body {
	scroll-behavior: smooth;
}

Задание scroll-behavior через JavaScript

Для элемента, в котором нужна плавная прокрутка, просто передайте в метод scrollBy в объект настроек соответствующий ключ behavior:


window.scrollBy({ 
	top: 666, 
	behavior: 'smooth' 
});

Или так:


window.scrollTo( 0, 999, { 
	behavior: 'smooth' 
});

Проверка наличия scroll-behavior в браузере


var hasSmoothScroll = 'scrollBehavior' in 
document.documentElement.style;

Поддержка браузерами

Chrome Firefox (Gecko) Firefox Mobile(Gecko) IE Opera Safari
yes 36 36 ? ? ?

На данный момент свойство scroll-behavior поддерживается только в Firefox и Chrome. Будем надеяться, что в скором времени это изменится в лучшую сторону.

Для браузеров без поддержки scroll-behavior можно использовать полифил Дастена Кастена, чтобы эмулировать соответствующее поведение скролла.

Живой пример

RTFM

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • В Chrome написано, что данная функция только для Linux

    • Windows 8.2 х 64bit — полёт нормальный

    • Смотри вложение