W3docs
ru
Войти

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

Use the scroll-behavior CSS property to specify the behavior of the scroll. See property values and examples.

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

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

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

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

Синтаксис

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

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

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

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

<!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>
Попробуйте сами »

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

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

<!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>
Попробуйте сами »

Значения

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

Практика

Практика

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