initial commit

2 files changed, 152 insertions, 0 deletions

diff --git a/files/ru/web/css/css_scroll_snap/basic_concepts/index.html b/files/ru/web/css/css_scroll_snap/basic_concepts/index.html
new file mode 100644
index 0000000000..1132200f6e
--- /dev/null
+++ b/files/ru/web/css/css_scroll_snap/basic_concepts/index.html
@@ -0,0 +1,66 @@
+---
+title: Базовые концепции CSS Scroll Snap
+slug: Web/CSS/CSS_Scroll_Snap/Basic_concepts
+translation_of: Web/CSS/CSS_Scroll_Snap/Basic_concepts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Спецификация <a href="https://drafts.csswg.org/css-scroll-snap-1/">CSS Scroll Snap</a> даёт нам возможность реализовывать прокрутку документа с привязкой к определённым точкам. Это может быть полезно в создании интерфейса, по своей работе больше похожего на мобильное приложение.</p>
+
+<h2 id="Основы_Scroll_Snap">Основы Scroll Snap</h2>
+
+<p>Ключевыми свойствами спецификации Scroll Snap являются {{CSSxRef("scroll-snap-type")}} и {{CSSxRef("scroll-snap-align")}}. Свойство <code>scroll-snap-type</code> применяется к <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Scroll_container">скролл-контейнеру</a> для определения типа и направления прокрутки.</p>
+
+<p>Свойство <code>scroll-snap-align</code> нужно применять к дочерним элементам, чтобы указать позицию, к которой будет привязана прокрутка. Пример ниже демонстрирует прокрутку с привязкой вдоль оси <code>y</code>, а свойство <code>scroll-snap-align</code> применяется для элемента "section", чтобы задать точку, на которой прокрутка должна остановиться.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}</p>
+
+<h2 id="Свойство_scroll-snap-type">Свойство scroll-snap-type</h2>
+
+<p>Свойство {{CSSxRef("scroll-snap-type")}} необходимо, чтобы задавать направление, в котором будет происходить привязка прокрутки. Значением свойства может быть <code>x</code>, <code>y</code>, или соответствующие логические <code>block</code> или <code>inline</code>. Также можно использовать ключевое слово <code>both</code>, чтобы привязка работала в обоих направлениях.</p>
+
+<p>Также можно передавать ключевые слова <code>mandatory</code>, или <code>proximity</code>. Ключевое слово <code>mandatory</code> определяет обязательное смещение прокрутки браузера к ближайшей точке привязки. Ключевое слово <code>proximity</code> означает, что привязка может прозойти , но не обязательно.</p>
+
+<p>Использование <code>mandatory</code> делает взаимодействие с интерфейсом однородным и предсказуемым — вы знаете, что браузер всегда будет смещать область видимости к каждой заданной точке привязки. Это даёт уверенность в том, что в после прокрутки экрана, в его верхней части окажется именно то, что вы и ожидаете там увидеть.Однако, это может привести и к проблемам, если содержимое слишком большое повысоте — пользователи могут оказаться в очень неприятной ситуации, не имея возможности переместиться к пределённому месту на странице странице. Следовательно, применение <code>mandatory</code> должно быть тщательно продуманным и использовано только в тех ситуациях, когда вы точно знаете, какое количество содержимого будет на экране в каждый момент времени.</p>
+
+<p>При значении <code>proximity</code> привязка будет осуществляться только в тех ситуациях, когда область видимости находится достаточно близко к точке привязки. Определение точного расстояния, на котором это будет происходить, остаётся за браузером. В примере ниже вы можете изменить значение с <code>mandatory</code> на <code>proximity</code>, чтобы увидеть, как это влияет на работу прокрутки.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}</p>
+
+<h2 id="Свойство_scroll-snap-align">Свойство scroll-snap-align</h2>
+
+<p>Свойство {{CSSxRef("scroll-snap-align")}} может принимать значения <code>start</code>, <code>end</code>, или <code>center</code>, обозначающие, какую сторону контейнера прижимать к дочернему элементу. В примере ниже вы можете изменить значение <code>scroll-snap-align</code>, чтобы увидеть, как это повлияет на работу прокрутки.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}}</p>
+
+<h2 id="Внутренний_отступ_контейнера">Внутренний отступ контейнера</h2>
+
+<p>Если вы не хотите, чтобы содержимое вплотную прилегало к краю прокручиваемого контейнера, можете воспользоваться сокращённым свойством {{CSSxRef("scroll-padding")}} или альтернативными ему более конкретными свойствами <code>scroll-padding-*</code>, чтобы задать для прокрутки внутренние отступы с каждой стороны контейнера.</p>
+
+<p>В примере ниже для свойства <code>scroll-padding</code> установлено значение 40 пикселей. Когда происходит смещение к началу второй и третьей секции, прокрутка останавливается в 40 пикселях от начала элемента. Попробуйте изменить значение свойства <code>scroll-padding</code>, чтобы увидеть изменение размера отступа.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}</p>
+
+<p>Это может быть полезно в ситуации, когда у вас есть фиксированно позиционированный элемент. Например, панель навигации, которая может перекрывать содержимое. С помощью <code>scroll-padding</code> вы можете оставить место для панели, как это сделано в примере ниже, где <code>&lt;h1&gt;</code> остаётся на экране, а содержимое при прокрутке оказывается под панелью. Без отступов шапка перекроет некоторую часть содержимого, когда произойдёт смещение к привязанной точке.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}</p>
+
+<h2 id="Внешние_отступы_дочерних_элементов">Внешние отступы дочерних элементов</h2>
+
+<p>Свойство {{CSSxRef("scroll-margin")}} может быть задано для дочерних элементов и определяет, по сути, внешний оступ данного элемента до позиции прокрутки. Это позволяет дочерним элементам занимать разное количество места, и может использоваться в сочетании со свойством <code>scroll-padding</code> для родителя. Опробуйте его в примере ниже</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}</p>
+
+<h2 id="Свойство_scroll-snap-stop">Свойство scroll-snap-stop</h2>
+
+<p>Свойство {{CSSxRef("scroll-snap-stop")}} сообщает браузеру, обязательно ли ему останавливаться на каждой точке привязки дочерних элементов (это значит, что в примере выше мы бы останавливались в начале каждой секции) или допускается возможность пропускать их. Это свойство реализовано в меньшем количестве браузеров, чем другие свойства из данной спецификации.</p>
+
+<p>Данное свойство может быть полезно в ситуации, когда нужно, чтобы пользователь гарантированно увидел каждую прокручиваемую секцию, случайно не пролистав какую-то из них. С другой сторона, такое поведение прокрутки может только мешать и замедлять пользователя, который ищет конкретную секцию.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: на данный момент свойство <code>scroll-snap-stop</code> помечено рискованным для использования в данной версии спецификации, следовательно может быть вообще удалено.</p>
+</div>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>На страницах каждого свойства Scroll Snap содержатся подробности поддержки браузерами. Обратите внимание, что до версии 68, в браузере Firefox была реализована поддержка старой версии спецификации. <a href="/en-US/docs/Web/CSS/CSS_Scroll_Snap/compat">Читайте следующее руководство</a>, чтобы узнать, как писать код, который будет поддерживаться всеми браузерами.</p>
diff --git a/files/ru/web/css/css_scroll_snap/index.html b/files/ru/web/css/css_scroll_snap/index.html
new file mode 100644
index 0000000000..1d9daef4a3
--- /dev/null
+++ b/files/ru/web/css/css_scroll_snap/index.html
@@ -0,0 +1,86 @@
+---
+title: CSS Scroll Snap
+slug: Web/CSS/CSS_Scroll_Snap
+tags:
+  - CSS
+  - CSS Scroll Snap
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Scroll_Snap
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><strong>CSS Scroll Snap</strong> is a module of CSS that introduces scroll snap positions, which enforce the scroll positions that a {{Glossary("scroll container")}}’s {{Glossary("scrollport")}} may end at after a scrolling operation has completed.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The previous version of this module was called Scroll Snap Points and has been deprecated. CSS Scroll Snap is the current implementation.</p>
+</div>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties_on_Containers">CSS Properties on Containers</h3>
+
+<ul>
+ <li>{{cssxref("scroll-snap-type")}}</li>
+ <li>{{cssxref("scroll-snap-stop")}}</li>
+ <li>{{cssxref("scroll-padding")}}</li>
+ <li>{{cssxref("scroll-padding-top")}}</li>
+ <li>{{cssxref("scroll-padding-right")}}</li>
+ <li>{{cssxref("scroll-padding-bottom")}}</li>
+ <li>{{cssxref("scroll-padding-left")}}</li>
+ <li>{{cssxref("scroll-padding-inline")}}</li>
+ <li>{{cssxref("scroll-padding-inline-start")}}</li>
+ <li>{{cssxref("scroll-padding-inline-end")}}</li>
+ <li>{{cssxref("scroll-padding-block")}}</li>
+ <li>{{cssxref("scroll-padding-block-start")}}</li>
+ <li>{{cssxref("scroll-padding-block-end")}}</li>
+</ul>
+
+<h3 id="CSS_Properties_on_Children">CSS Properties on Children</h3>
+
+<ul>
+ <li>{{cssxref("scroll-snap-align")}}</li>
+ <li>{{cssxref("scroll-margin")}}</li>
+ <li>{{cssxref("scroll-margin-top")}}</li>
+ <li>{{cssxref("scroll-margin-right")}}</li>
+ <li>{{cssxref("scroll-margin-bottom")}}</li>
+ <li>{{cssxref("scroll-margin-left")}}</li>
+ <li>{{cssxref("scroll-margin-inline")}}</li>
+ <li>{{cssxref("scroll-margin-inline-start")}}</li>
+ <li>{{cssxref("scroll-margin-inline-end")}}</li>
+ <li>{{cssxref("scroll-margin-block")}}</li>
+ <li>{{cssxref("scroll-margin-block-start")}}</li>
+ <li>{{cssxref("scroll-margin-block-end")}}</li>
+</ul>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts">Basic concepts of CSS Scroll Snap</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Scroll_Snap/compat">Browser Compatibility and Scroll Snap</a></li>
+</ul>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>The individual property pages detail the browser compatibility situation for Scroll Snap. Note that at the present time Firefox still implements an old version of the specification. <a href="/en-US/docs/Web/CSS/CSS_Scroll_Snap/compat">Read the guide to browser compatibility</a> for an overview of how to support both the old and new specification. </p>