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

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

Это свойство не влияет на прокрутку, выполняемую пользователем. Свойство scroll-behavior, указанное для элемента body, не будет передаваться на область просмотра (viewport). Его следует указывать для элемента html.

Пользовательские агенты могут игнорировать это свойство.

Начальное значение	auto
Применяется к	Прокручиваемые блоки.
Наследуется	Нет.
Анимировано	Нет.
Версия	CSSOM View Module (Working Draft)
Синтаксис DOM	object.style.scrollBehavior = "smooth";

Синтаксис

Синтаксис CSS scroll-behavior

css

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

Пример свойства scroll-behavior со значением "auto":

Пример кода CSS scroll-behavior

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        scroll-behavior: auto;
      }
      #element1 {
        height: 600px;
        background-color: #ccc;
      }
      #element2 {
        height: 600px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Scroll-behavior property example</h2>
    <div class="main" id="element1">
      <h2>Element 1</h2>
      <a href="#element2">Click to scroll to Element 2</a>
    </div>
    <div class="main" id="element2">
      <h2>Element 2</h2>
      <a href="#element1">Click to scroll to Element 1</a>
    </div>
  </body>
</html>

Try it Yourself »

Пример свойства scroll-behavior со значением "smooth":

Пример CSS scroll-behavior со значением smooth

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        scroll-behavior: smooth;
      }
      #element1 {
        height: 600px;
        background-color: #ccc;
      }
      #element2 {
        height: 600px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Scroll-behavior property example</h2>
    <div class="main" id="element1">
      <h2>Element 1</h2>
      <a href="#element2">Click to scroll to Element 2</a>
    </div>
    <div class="main" id="element2">
      <h2>Element 2</h2>
      <a href="#element1">Click to scroll to Element 1</a>
    </div>
  </body>
</html>

Try it Yourself »

Значения

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

Практика

Что контролирует CSS-свойство 'scroll-behavior' на веб-странице?

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

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

Синтаксис ​

Пример свойства scroll-behavior со значением "auto": ​

Пример свойства scroll-behavior со значением "smooth": ​