CSS-свойство scroll-behavior
Случайно нашёл небольшую статью про CSS-свойство scroll-behavior
, которое является частью чернового стандарта CSS View Module.
При переходе по ссылкам на внутренние части страницы с помощью якорей (ссылки начинающие на символ #
) страница прокручивается резко. Плавную прокрутку можно сделать с помощью JavaScript, но тоже самое можно реализовать с помощью scroll-behavior
. Это CSS-свойство поддерживает два значения: auto
— для обычного резкого перехода, smooth
— для плавной прокрутки к якорю.
Со scroll-behavior: smooth
есть две основные проблемы: он не поддерживается в Safari, и он может вызывать укачивание у пользователей. Поддержку в Safari стоит только ждать, а с укачиванием можно побороться с помощью отключения плавного скролла с использованием media query prefers-reduced-motion
.
https://css-tricks.com/almanac/properties/s/scroll-behavior/