CSS Scroll Snap: Что это? Нужен ли он нам?

CSS Scroll Snap: Что это? Нужен ли он нам?

От автора: веб-разработчикам сложно гарантировать хороший 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 контейнера и представляет собой линию из красных точек на рисунке выше.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Мы разобрались в терминах, теперь давайте рассмотрим пару примеров и узнаем, как они работают в реальной жизни. Более подробно о случаях использования можно узнать в примере 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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree