Плавный скроллинг при помощи CSS
В прошлом году, создавая страницу продукта FilePond, я наткнулся на API scrollIntoView. Это удобный метод указывает браузеру прокрутить элемент в окне просмотра.
Эта статья была изначально опубликована в моем личном блоге
API scrollIntoView можно назначить анимацию прокручиваемой части, добавив свойство поведения в объект scrollIntoViewOption.
![](/static/storage/52314895980983551402742200112234341034.png)
Я быстро запрыгнул на своего JavaScript-коня и написал крошечный скрипт для автоматического определения щелчков на якорях, чтобы браузер оживлял переход к элементу привязки. Этот переход действительно может дезориентировать пользователя, поэтому анимация этого процесса значительно улучшит UX.
В настоящее время scrollIntoViewOptions работает только в Firefox и Chrome.
![Noice!](https://res.cloudinary.com/practicaldev/image/fetch/s--oB_Jm0V3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/h9rjdbd131sseypv7n1y.gif)
Я разместил сообщение в Твиттере .
Затем Hans Spieß написал, что это также можно сделать с помощью CSS, ЧТО !?
Оказывается, есть свойство CSS scroll-behavior
, которому нужно задать параметр smooth
. Похоже на awesome: yes-please
. Если мы хотим установить плавную прокрутку контейнеру, мы просто можем установить свойство scroll-behavior
и все готово.
Вот мое новое демо, где я использую только лишь CSS
![https://res.cloudinary.com/practicaldev/image/fetch/s--Pa3SK6e4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/qci4smo6xj0fazxwuz9t.gif](https://res.cloudinary.com/practicaldev/image/fetch/s--Pa3SK6e4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/qci4smo6xj0fazxwuz9t.gif)
Прежде чем мы начнем сходить с ума и пихать это на все сайты давайте подумаем о нескольких моментах.
Значение расстояния прокрутки
Если есть большое расстояние для перемещения, Firefox пропустит контент, чтобы ограничить время прокрутки, в то время как Chrome, прокручиваясь на максимальной скорости просто займет время, чтобы добраться до цели.
![Long distance scroll comparison](https://res.cloudinary.com/practicaldev/image/fetch/s--WGSbG_d1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/2t28rviy1nrfjbepbm81.gif)
Мы могли бы использовать Smart CSS для обнаружения длинных страниц и условно применить стиль плавной прокрутки.
Легкость просмотра
Пользователи просто могут заскучать при такой анимации и захотеть спать. Решение здесь будет такое - обернуть свойство CSS в prefers-reduced-motion
медиа-запрос. Но, к сожалению, Chrome не поддерживает это свойство. Safari поддерживает, но Safari не поддерживает плавную прокрутку.
![](/static/storage/335566631179142996978300005805671780143.png)
Заключение
При выборе новой функциональности мы не должны сразу бежать за JavaScript. Сначала можно быстро выяснить, можно ли это сделать и с помощью CSS. Свойство scroll-behavior
может быть хорошим улучшением UX, но обязательно отключите его на очень длинных страницах и дайте пользователю возможность отключить его, чтобы сохранить легкое чтение ваших страниц.
Перевод статьи: CSS Smooth Scrolling