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

Плавная прокрутка при помощи 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 NightlyCSS scroll-behavior: smooth in Firefox Nightly

RTFM

Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

3 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Harrix
9 лет назад

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

mihdan
9 лет назад
Ответить на  Harrix

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

mihdan
9 лет назад
Ответить на  Harrix

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

Предыдущая запись
Следующая запись

Давайте дружить
в Telegram

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы