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

Основы Scroll Snap

Ключевыми свойствами спецификации Scroll Snap являютсяscroll-snap-type иscroll-snap-align. Свойство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 может принимать значенияstart,end, илиcenter, обозначающие, какую сторону контейнера прижимать к дочернему элементу. В примере ниже вы можете изменить значениеscroll-snap-align, чтобы увидеть, как это повлияет на работу прокрутки.

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

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

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

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

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

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

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

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

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