scroll-behavior

Управляет поведением прокрутки внутри блока. Значение 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: no-preference) {  .smooth-scroll {    scroll-behavior: smooth;  }}
          @media (prefers-reduced-motion: no-preference) {
  .smooth-scroll {
    scroll-behavior: smooth;
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать