От автора: веб-разработчикам сложно гарантировать хороший UX при прокручивании страницы, но, к счастью, CSS модуль «Scroll Snap» должен помочь в этом. Модуль принудительно устанавливает конечную позицию скрола после выполнения прокрутки. Помимо всего прочего, в модуле есть функции управления, такие как панорамирование в сочетании с «привязками». Модуль CSS Scroll Snap обеспечивает выравнивание контента внутри контейнера со скролом. Недавно W3C выпустили Scroll Snap как Candidate Recommendation с хорошо продуманными реализациями и примерами, а также с обновленным синтаксисом. Давайте разбираться.
Терминология Scroll Snap
Чтобы понять мощь Scroll Snap и принцип его работы, необходимо знать его терминологию. Это также поможет избежать недопонимания при использовании терминов в этой статье.
Scroll snap проходит внутри snapport или scrollport. Оба термина значат одно и то же, их можно заменить на контейнер скрола. Это область, в которой проходит scroll snap, как видно на рисунке выше (внешняя прерывистая рамка). Ее цель – принудительно установить позицию завершения для scrollport внутри контейнера после завершения операции.
Каждый элемент snapport называется snap area и является объектом (-ми), которые нам и нужны. В каждой snap area есть snap position, которое также определяется через snap position контейнера и представляет собой линию из красных точек на рисунке выше.
Мы разобрались в терминах, теперь давайте рассмотрим пару примеров и узнаем, как они работают в реальной жизни. Более подробно о случаях использования можно узнать в примере W3C с фотогалереей и демо, а также по ссылке. Также обновилась спецификация Modules August 2017 CR. В :target должны заложить довольно интересное поведение.
Демо Scroll Snap
На момент написания статьи демо ниже лучше всего просматривать в Safari 11. Другие браузеры не полностью поддерживают новый синтаксис, несмотря на данные с caniuse и личные тесты.
Пример ниже показывает только минимум необходимых свойств для включения CSS Scroll Snap. В нем нет полифилов, мне не удалось найти рабочий polyfill, который бы работал с последним опубликованным синтаксисом. Также любой скрол контейнер потребует еще одно известное CSS свойство overflow.
Демо выше использует ось У в качестве snap position. Однако можно и использовать ось Х. Если у вас не установлен Safari 11, ниже представлена запись демо.
Панели аккуратно переключаются. Обратите внимание, на странице есть определенная точка, в которой импульс прокрутки берет верх и перепрыгивает к следующему блоку. Быстро, да? Второе демо, где ось У используется для показа галереи изображений.
По мере прокрутки по горизонтали импульс достигает точки невозврата scrollport и snap area, независимо от размера изображения.
Свойства и синтаксис scroll snap
Перейдем к объяснению свойств, их синтаксиса и значений.
В текущей спецификации scroll snap всего 4 свойства, и каждое играет важную роль. Эти 4 свойства…
scroll-snap-type
scroll-snap-align
scroll-padding
scroll-margin
Разберем каждое свойство, как оно работает, где определяется и какие значения принимает.
scroll-snap-type
Это свойство определяет тип контейнера — scroll snap container или snapport – строгость переключения, а также используемую ось. Если строгое значение не задано, по умолчанию передается proximity. Свойство также принимает другое значение, помогающее в определении snap axis. Можно передать 2 значения (например, scroll-snap-type: y mandatory). В таком случае snap-type касается только оси У и имеет значение mandatory.
Scroll Snap Axis: x, y, block, inline или both
x: скрол контейнер фиксирует snap position только по горизонтальной оси
y: скрол контейнер фиксирует snap position только по вертикальной оси
block: скрол контейнер фиксирует snap position только по оси блока
inline: скрол контейнер фиксирует snap position только по инлайн оси
both: скрол контейнер фиксирует snap position по обеим осям независимо (потенциально привязываясь к разным элементам каждой оси)
Scroll Snap Strictness: none, proximity и mandatory
none: если задан на скрол контейнере, то скрол контейнер не переключается
proximity: если задан на скрол контейнере, то скрол контейнер должен быть привязан к snap position, в которой нет активных операций прокрутки. Если доступная snap position существует, тогда скрол контейнер должен переключиться по завершении прокрутки (если позиции нет, переключения не будет)
mandatory: если задан на скрол контейнере, скрол контейнер может привязываться к snap position в момент завершения прокрутки
scroll-snap-align
Свойство scroll-snap-align задает snap position контейнера, как выравнивание его snap area (как объект выравнивания) внутри snapport контейнера (как контейнер выравнивания). Два значения определяют выравнивание привязки по инлайн оси и блоковой оси соответственно. Если задано одно значение, второе значение по умолчанию дублируется. Принимаемые значения none, center, start и end.
Это свойство определяется для дочерних элементов скрол контейнера и принимает 2 значения. Первое значение – ось Х, второе – ось У. Например, scroll-snap-align: start center.
None: такой блок не определяет snap position по заданной оси.
Start: начальное выравнивание snap area скрола блока внутри snapport контейнера – это snap position по заданной оси
End: конечное выравнивание snap area скрола блока внутри snapport контейнера – это snap position по заданной оси
Center: центральное выравнивание snap area скрола блока внутри snapport контейнера – это snap position по заданной оси
scroll-padding
Значения scroll-padding ведут себя как сдвиги. Когда они определены, у контейнера уменьшается прокручиваемая область, считающаяся видимой. Свойство не влияет на макет, область скрола, начальное положение и на видимость элемента. Существует 2 формы: первая похожа на стандартное свойство padding, и длинная версия scroll-padding-top и scroll-padding-bottom, например.
scroll-margin
Эти значения представляют собой внешние выражения, объявленные для скрол контейнера, которые определяют snap area, используемую для привязки элементов к snapport. Работает как свойство margin, как сокращенная так и длинная версия scroll-margin-top и scroll-margin-bottom.
Заключительные мысли
Последние обновления в editor’s draft привели к ухудшению поддержки, на данный момент, как я уже говорил, нет рабочих полифилов. Есть вероятность того, что свойство scroll-snap-stop будет удалено в CR. Я также выяснил, что min-height сейчас не работает, когда задано на scroll snap контейнере. Может, есть другие свойства со схожим действием. Если знаете такие, оставляйте их в комментариях.
Это беглый обзор CSS Scroll snap. Стоит оно того? Будет он вам полезен? Или его нужно поместить в самые темные уголки галактики, где его никто не найдет? Оставляйте ответы в комментариях. И как всегда, хорошо покодить!
Автор: Dennis Gaebel
Источник: https://webdesign.tutsplus.com/
Редакция: Команда webformyself.