Верх страницы
Обложка к записи Плавная прокрутка при помощи scroll-behavior
Время для прочтения: 2 мин. 5 сек.

Плавная прокрутка при помощи 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;

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

БраузерВерсия
Chromeyes
Firefox (Gecko)36
Firefox Mobile (Gecko)36
IE?
Opera?
Safari?

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

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

Живой пример

CSS scroll-behavior: smooth in Firefox Nightly

RTFM

ВКонтакте
Одноклассники
Linkedin
Telegram
WhatsApp

Комментарии
Следующая запись