Базовые концепции CSS Scroll Snap
=================================

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

Основы Scroll Snap
------------------

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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