Плавная прокрутка при помощи 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;
Поддержка браузерами
На данный момент свойство scroll-behavior поддерживается только в Firefox и Chrome. Будем надеяться, что в скором времени это изменится в лучшую сторону.
Для браузеров без поддержки scroll-behavior можно использовать полифил Дастена Кастена, чтобы эмулировать соответствующее поведение скролла.
Живой пример
RTFM
- Native smooth scrolling with JS (источник)
- scroll-behavior
- CSSOM-View Scroll-Behavior CSS Property and CSSOM-View DOM Extensions for Smooth Scrolling
- Smooth Scrolling: The «scroll-behavior» Property
- Blink-dev: Intent to Implement: CSSOM View smooth scroll API
В Chrome написано, что данная функция только для Linux
Windows 8.2 х 64bit — полёт нормальный
Смотри вложение