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	Значение элемента наследуется от родительского элемента.