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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
---
title: scroll-behavior
slug: Web/CSS/scroll-behavior
translation_of: Web/CSS/scroll-behavior
---
<div>{{ CSSRef }}</div>
<h2 id="Summary" name="Summary">Описание</h2>
<p><strong><code>scroll-behavior</code></strong> - CSS свойство, которое определяет поведение прокрутки для любого элемента на странице. Отрабатывается в момент автоматической прокрутки навигационных элементов, либо CSSOM прокручивается API. Любые другие прокручивания, например, те, которые выполняются пользователем, не затрагиваются этим свойством. Если это свойство указано на корневой элемент, оно относится ко всему <em>viewport</em> пространству.</p>
<p>Юзер-агенты могут игнорировать это свойство.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax" name="Syntax">Синтаксис</h2>
<pre class="brush:css">/* Ключевые значения */
scroll-behavior: auto;
scroll-behavior: smooth;
/* Глобальные свойства */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;
</pre>
<h3 id="Values" name="Values">Значения</h3>
<dl>
<dt><code>auto</code></dt>
<dd>Стандартное поведение прокрутки без эффекта плавности.</dd>
<dt><code>smooth</code></dt>
<dd>Элемент прокручивается плавно; используется функция тайминга, определяемая юзер-агентом через период времени, отмеченный в нем. Юзер-агенты должны следовать соглашениям платформы, если таковые имеются.</dd>
</dl>
<h3 id="Синтаксис">Синтаксис</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Example" name="Example">Пример</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><nav>
<a href="#page-1">1</a>
<a href="#page-2">2</a>
<a href="#page-3">3</a>
</nav>
<scroll-container>
<scroll-page id="page-1">1</scroll-page>
<scroll-page id="page-2">2</scroll-page>
<scroll-page id="page-3">3</scroll-page>
</scroll-container></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">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 {
display: block;
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;
}
</pre>
<h3 id="Результат">Результат</h3>
<p>{{ EmbedLiveSample('Example', "100%", 250) }}</p>
<h2 id="Specifications" name="Specifications">Характеристики</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Характеристика</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}</td>
<td>{{Spec2('CSSOM View')}}</td>
<td>Initial specification</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
<p>{{Compat("css.properties.scroll-behavior")}}</p>
|
