From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:42:52 -0500
Subject: initial commit

---
 files/ru/web/css/scroll-behavior/index.html | 114 ++++++++++++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100644 files/ru/web/css/scroll-behavior/index.html

(limited to 'files/ru/web/css/scroll-behavior')

diff --git a/files/ru/web/css/scroll-behavior/index.html b/files/ru/web/css/scroll-behavior/index.html
new file mode 100644
index 0000000000..8ba0b4f9f7
--- /dev/null
+++ b/files/ru/web/css/scroll-behavior/index.html
@@ -0,0 +1,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">&lt;nav&gt;
+  &lt;a href="#page-1"&gt;1&lt;/a&gt;
+  &lt;a href="#page-2"&gt;2&lt;/a&gt;
+  &lt;a href="#page-3"&gt;3&lt;/a&gt;
+&lt;/nav&gt;
+&lt;scroll-container&gt;
+  &lt;scroll-page id="page-1"&gt;1&lt;/scroll-page&gt;
+  &lt;scroll-page id="page-2"&gt;2&lt;/scroll-page&gt;
+  &lt;scroll-page id="page-3"&gt;3&lt;/scroll-page&gt;
+&lt;/scroll-container&gt;</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>
-- 
cgit v1.2.3-54-g00ecf