Вероятно вы встречали некоторые сайты, где прокрутка совершенно другая, что плавно ивсе прокручивается, и сильно отличается от стандартной. Теперь можно настроить плавную прокрутку для веб-страницы только с помощью CSS, без необходимости использования Javascript.
Это делается с помощью свойства scroll-behavior в CSS. Плавную прокрутку можно настроить либо на полную веб-страницу, либо на определенные элементы.
Может быть 2 значения для scroll-behavio:
- smooth: который применяет плавную прокрутку
- auto: которая является мгновенной прокруткой по умолчанию.
Чтобы плавная прокрутка работала на всей странице, необходимо применить scroll-behavior к корневому элементу - html . Установка этого элемента body не будет работать.
Код
html {
scroll-behavior: smooth;
}
Для конкретного элемента:
Код
#main-container {
scroll-behavior: smooth;
}
Возможно, вы захотите указать собственную функцию анимации для прокрутки, но к сожалению это невозможно сделать, так как функция синхронизации и определяется самим браузером.
Демонстрация
