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

Источник: https://www.kobzarev.com/programming/scroll-behavior/

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

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: