CSS свойство scroll-behavior

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

Свойство scroll-behavior, указанное для body элемента, не будет распространяться на окно просмотра. Оно должно быть указано для html элемента.

Значение по умолчанию auto
Применяется К блокам с прокруткой.
Наследуется Нет
Анимируемое Нет
Версия CSSOM View Module (Working Draft)
DOM синтаксис object.style.scrollBehavior = "smooth";

Синтаксис

scroll-behavior: auto | smooth | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      html {
      scroll-behavior: auto;
      }
      #element1 {
      height: 600px;
      background-color: #ccc;
      }
      #element2 {
      height: 600px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства scroll-behavior</h2>
    <div class="main" id="element1">
      <h2>Element 1</h2>
      <a href="#element2">Прокрутите, чтобы увидеть Element 2</a>
    </div>
    <div class="main" id="element2">
      <h2>Element 2</h2>
      <a href="#element1">Прокрутите, чтобы увидеть Element 1</a>
    </div>
  </body>
</html>

Пример со значением "smooth":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      html {
      scroll-behavior: smooth;
      }
      #element1 {
      height: 600px;
      background-color: #ccc;
      }
      #element2 {
      height: 600px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства scroll-behavior</h2>
    <div class="main" id="element1">
      <h2>Element 1</h2>
      <a href="#element2">Прокрутите, чтобы увидеть Element 2</a>
    </div>
    <div class="main" id="element2">
      <h2>Element 2</h2>
      <a href="#element1">Прокрутите, чтобы увидеть Element 1</a>
    </div>
  </body>
</html>

Значения

Значение Описание
auto Резкая прокрутка между элементами.
smooth Плавная прокрутка между элементами.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome firefox safari opera
61.0+ 36 48.0+

Практикуйте свои знания

Что такое CSS свойство scroll-behavior?
Считаете ли это полезным?