Кратко
СкопированоУправляет поведением прокрутки внутри блока. Значение smooth делает её плавной.
Пример
Скопировано
html { scroll-behavior: smooth;}
html {
scroll-behavior: smooth;
}
Как понять
СкопированоПри переходе по якорной ссылке браузер мгновенно прыгает к целевому блоку. То же самое происходит, если изменять положение полосы прокрутки при помощи JS. Чтобы изменить стандартное поведение можно использовать значение smooth. Оно сделает прокрутку плавной. Но в остальных ситуациях, например, при прокрутке пользователем колёсика мышки, свойство scroll не повлияет на поведение браузера.
Как пишется
СкопированоВозможные значения scroll:
auto— значение по умолчанию, мгновенная прокрутка;smooth— плавная прокрутка.
Подсказки
Скопировано💡 Если вы хотите указать scroll для всей страницы, указывайте его для селектора html. Для селектора body свойство не сработает.
💡 Значение scroll не наследуется — его нужно указывать для каждого блока с собственной полосой прокрутки.
💡 Браузер сам управляет скоростью и временем плавной прокрутки, сейчас нет способа на это влиять.
На практике
Скопированосоветует
Скопировано🛠 Пользователи могут по какой-то причине отключить анимацию в системе. Например, их укачивает от плавной прокрутки на странице с большим количеством контента. Чтобы этого не произошло, можно использовать директиву @media с проверкой значения prefers в условии и анимировать прокрутку только тогда, когда пользователь не отключил анимацию.
@media (prefers-reduced-motion: no-preference) { .smooth-scroll { scroll-behavior: smooth; }}
@media (prefers-reduced-motion: no-preference) {
.smooth-scroll {
scroll-behavior: smooth;
}
}