В ночных сборках 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/
