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
|
---
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><h1></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>
|
