• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать плавную прокрутку в CSS для сайта (Как можно создать плавную прокрутку на интернет сайте)
Создать плавную прокрутку в CSS для сайта
Kosten
Дата: Среда, 2019-10-02, 18:05 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25011
Награды: 57


Вероятно вы встречали некоторые сайты, где прокрутка совершенно другая, что плавно ивсе прокручивается, и сильно отличается от стандартной. Теперь можно настроить плавную прокрутку для веб-страницы только с помощью CSS, без необходимости использования Javascript.

Это делается с помощью свойства scroll-behavior в CSS. Плавную прокрутку можно настроить либо на полную веб-страницу, либо на определенные элементы.

Может быть 2 значения для scroll-behavio:

- smooth: который применяет плавную прокрутку
- auto: которая является мгновенной прокруткой по умолчанию.

Чтобы плавная прокрутка работала на всей странице, необходимо применить scroll-behavior к корневому элементу - html . Установка этого элемента body не будет работать.

Код
html {
    scroll-behavior: smooth;
}

Для конкретного элемента:

Код
#main-container {
    scroll-behavior: smooth;
}

Возможно, вы захотите указать собственную функцию анимации для прокрутки, но к сожалению это невозможно сделать, так как функция синхронизации и определяется самим браузером.

Демонстрация
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать плавную прокрутку в CSS для сайта (Как можно создать плавную прокрутку на интернет сайте)
  • Страница 1 из 1
  • 1
Поиск: