Перейти к содержанию

scroll-behavior

Свойство scroll-behavior задает поведение поля прокрутки, когда прокрутка активируется API-интерфейсами навигации или прокрутки CSSOM.

Демо

Обратите внимание, что на любые другие прокрутки, например, выполняемые пользователем, это свойство не влияет. Когда это свойство указано для корневого элемента, вместо этого оно применяется к области просмотра. Это свойство, указанное в элементе body, не будет распространяться на область просмотра.

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

Pointer Events / События указателя

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: revert;
scroll-behavior: revert-layer;
scroll-behavior: unset;

Значения

auto

Поле прокрутки прокручивается мгновенно.

smooth

Поле прокрутки плавно прокручивается с использованием функции синхронизации, определяемой агентом пользователя, в течение периода времени, определяемого агентом пользователя. Пользовательские агенты должны следовать соглашениям платформы, если таковые имеются.

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

Пример

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<nav>
    <a href="#page-1">1</a>
    <a href="#page-2">2</a>
    <a href="#page-3">3</a>
</nav>
<div class="scroll-container">
    <div class="scroll-page" id="page-1">1</div>
    <div class="scroll-page" id="page-2">2</div>
    <div class="scroll-page" id="page-3">3</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
a {
    display: inline-block;
    width: 50px;
    text-decoration: none;
}
nav,
.scroll-container {
    display: block;
    margin: 0 auto;
    text-align: center;
}
nav {
    width: 339px;
    padding: 5px;
    border: 1px solid black;
}
.scroll-container {
    width: 350px;
    height: 200px;
    overflow-y: scroll;
    scroll-behavior: smooth;
}
.scroll-page {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 5em;
}

Ссылки

Комментарии