scroll-behavior

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Управляет поведением прокрутки внутри блока. Значение smooth делает её плавной.

Пример

Секция статьи "Пример"
        
          
          html {  scroll-behavior: smooth;}
          html {
  scroll-behavior: smooth;
}

        
        
          
        
      

Как понять

Секция статьи "Как понять"

При переходе по якорной ссылке браузер мгновенно прыгает к целевому блоку. То же самое происходит, если изменять положение полосы прокрутки при помощи JS. Чтобы изменить стандартное поведение можно использовать значение smooth. Оно сделает прокрутку плавной. Но в остальных ситуациях, например, при прокрутке пользователем колёсика мышки, свойство scroll-behavior не повлияет на поведение браузера.

Как пишется

Секция статьи "Как пишется"

Возможные значения scroll-behavior:

  • auto — значение по умолчанию, мгновенная прокрутка;
  • smooth — плавная прокрутка.
Открыть демо в новой вкладке

Подсказки

Секция статьи "Подсказки"

💡 Если вы хотите указать scroll-behavior для всей страницы, указывайте его для селектора html. Для селектора body свойство не сработает.

💡 Значение scroll-behavior не наследуется — его нужно указывать для каждого блока с собственной полосой прокрутки.

💡 Браузер сам управляет скоростью и временем плавной прокрутки, сейчас нет способа на это влиять.

На практике

Секция статьи "На практике"

Татьяна Фокина

Секция статьи "Татьяна Фокина"

🛠 Пользователи могут по какой-то причине отключить анимацию в системе. Например, их укачивает от плавной прокрутки на странице с большим количеством контента. Чтобы этого не произошло, можно использовать директиву @media с проверкой значения prefers-reduced-motion в условии и анимировать прокрутку только тогда, когда пользователь не отключил анимацию.

        
          
          @media (prefers-reduced-motion: no-preference) {  .smooth-scroll {    scroll-behavior: smooth;  }}
          @media (prefers-reduced-motion: no-preference) {
  .smooth-scroll {
    scroll-behavior: smooth;
  }
}