Базовые концепции 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 сообщает браузеру, обязательно ли ему останавливаться на каждой точке привязки дочерних элементов (это значит, что в примере выше мы бы останавливались в начале каждой секции) или допускается возможность пропускать их. Это свойство реализовано в меньшем количестве браузеров, чем другие свойства из данной спецификации.

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