Базовые концепции CSS Scroll Snap
Спецификация 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
сообщает браузеру, обязательно ли ему останавливаться на каждой точке привязки дочерних элементов (это значит, что в примере выше мы бы останавливались в начале каждой секции) или допускается возможность пропускать их. Это свойство реализовано в меньшем количестве браузеров, чем другие свойства из данной спецификации.
Данное свойство может быть полезно в ситуации, когда нужно, чтобы пользователь гарантированно увидел каждую прокручиваемую секцию, случайно не пролистав какую-то из них. С другой сторона, такое поведение прокрутки может только мешать и замедлять пользователя, который ищет конкретную секцию.
Примечание: На данный момент свойство scroll-snap-stop
помечено рискованным для использования в данной версии спецификации, следовательно может быть вообще удалено.