From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../css/css_scroll_snap/basic_concepts/index.html | 66 +++++++++++++++++ files/ru/web/css/css_scroll_snap/index.html | 86 ++++++++++++++++++++++ 2 files changed, 152 insertions(+) create mode 100644 files/ru/web/css/css_scroll_snap/basic_concepts/index.html create mode 100644 files/ru/web/css/css_scroll_snap/index.html (limited to 'files/ru/web/css/css_scroll_snap') 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 +--- +
{{CSSRef}}
+ +

Спецификация CSS Scroll Snap даёт нам возможность реализовывать прокрутку документа с привязкой к определённым точкам. Это может быть полезно в создании интерфейса, по своей работе больше похожего на мобильное приложение.

+ +

Основы Scroll Snap

+ +

Ключевыми свойствами спецификации Scroll Snap являются {{CSSxRef("scroll-snap-type")}} и {{CSSxRef("scroll-snap-align")}}. Свойство scroll-snap-type применяется к скролл-контейнеру для определения типа и направления прокрутки.

+ +

Свойство scroll-snap-align нужно применять к дочерним элементам, чтобы указать позицию, к которой будет привязана прокрутка. Пример ниже демонстрирует прокрутку с привязкой вдоль оси y, а свойство scroll-snap-align применяется для элемента "section", чтобы задать точку, на которой прокрутка должна остановиться.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}

+ +

Свойство scroll-snap-type

+ +

Свойство {{CSSxRef("scroll-snap-type")}} необходимо, чтобы задавать направление, в котором будет происходить привязка прокрутки. Значением свойства может быть x, y, или соответствующие логические block или inline. Также можно использовать ключевое слово both, чтобы привязка работала в обоих направлениях.

+ +

Также можно передавать ключевые слова mandatory, или proximity. Ключевое слово mandatory определяет обязательное смещение прокрутки браузера к ближайшей точке привязки. Ключевое слово proximity означает, что привязка может прозойти , но не обязательно.

+ +

Использование mandatory делает взаимодействие с интерфейсом однородным и предсказуемым — вы знаете, что браузер всегда будет смещать область видимости к каждой заданной точке привязки. Это даёт уверенность в том, что в после прокрутки экрана, в его верхней части окажется именно то, что вы и ожидаете там увидеть.Однако, это может привести и к проблемам, если содержимое слишком большое повысоте — пользователи могут оказаться в очень неприятной ситуации, не имея возможности переместиться к пределённому месту на странице странице. Следовательно, применение mandatory должно быть тщательно продуманным и использовано только в тех ситуациях, когда вы точно знаете, какое количество содержимого будет на экране в каждый момент времени.

+ +

При значении proximity привязка будет осуществляться только в тех ситуациях, когда область видимости находится достаточно близко к точке привязки. Определение точного расстояния, на котором это будет происходить, остаётся за браузером. В примере ниже вы можете изменить значение с mandatory на proximity, чтобы увидеть, как это влияет на работу прокрутки.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}

+ +

Свойство scroll-snap-align

+ +

Свойство {{CSSxRef("scroll-snap-align")}} может принимать значения start, end, или center, обозначающие, какую сторону контейнера прижимать к дочернему элементу. В примере ниже вы можете изменить значение scroll-snap-align, чтобы увидеть, как это повлияет на работу прокрутки.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}}

+ +

Внутренний отступ контейнера

+ +

Если вы не хотите, чтобы содержимое вплотную прилегало к краю прокручиваемого контейнера, можете воспользоваться сокращённым свойством {{CSSxRef("scroll-padding")}} или альтернативными ему более конкретными свойствами scroll-padding-*, чтобы задать для прокрутки внутренние отступы с каждой стороны контейнера.

+ +

В примере ниже для свойства scroll-padding установлено значение 40 пикселей. Когда происходит смещение к началу второй и третьей секции, прокрутка останавливается в 40 пикселях от начала элемента. Попробуйте изменить значение свойства scroll-padding, чтобы увидеть изменение размера отступа.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}

+ +

Это может быть полезно в ситуации, когда у вас есть фиксированно позиционированный элемент. Например, панель навигации, которая может перекрывать содержимое. С помощью scroll-padding вы можете оставить место для панели, как это сделано в примере ниже, где <h1> остаётся на экране, а содержимое при прокрутке оказывается под панелью. Без отступов шапка перекроет некоторую часть содержимого, когда произойдёт смещение к привязанной точке.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}

+ +

Внешние отступы дочерних элементов

+ +

Свойство {{CSSxRef("scroll-margin")}} может быть задано для дочерних элементов и определяет, по сути, внешний оступ данного элемента до позиции прокрутки. Это позволяет дочерним элементам занимать разное количество места, и может использоваться в сочетании со свойством scroll-padding для родителя. Опробуйте его в примере ниже

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}

+ +

Свойство scroll-snap-stop

+ +

Свойство {{CSSxRef("scroll-snap-stop")}} сообщает браузеру, обязательно ли ему останавливаться на каждой точке привязки дочерних элементов (это значит, что в примере выше мы бы останавливались в начале каждой секции) или допускается возможность пропускать их. Это свойство реализовано в меньшем количестве браузеров, чем другие свойства из данной спецификации.

+ +

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

+ +
+

Примечание: на данный момент свойство scroll-snap-stop помечено рискованным для использования в данной версии спецификации, следовательно может быть вообще удалено.

+
+ +

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

+ +

На страницах каждого свойства Scroll Snap содержатся подробности поддержки браузерами. Обратите внимание, что до версии 68, в браузере Firefox была реализована поддержка старой версии спецификации. Читайте следующее руководство, чтобы узнать, как писать код, который будет поддерживаться всеми браузерами.

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 +--- +
{{CSSRef}}
+ +

CSS Scroll Snap 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.

+ +
+

Note: The previous version of this module was called Scroll Snap Points and has been deprecated. CSS Scroll Snap is the current implementation.

+
+ +

Reference

+ +

CSS Properties on Containers

+ + + +

CSS Properties on Children

+ + + +

Guides

+ + + +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Scroll Snap Points")}}{{Spec2("CSS Scroll Snap Points")}}Initial definition
+ +

Browser compatibility

+ +

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. Read the guide to browser compatibility for an overview of how to support both the old and new specification. 

-- cgit v1.2.3-54-g00ecf