Знакомство с CSS Scroll Snap Points

Знакомство с CSS Scroll Snap Points

От автора: до появления этой технологии на CSS, о которой мы сегодня будем с вами говорить, для обнаружения элемента в окне браузера во время прокрутки нужно было подключать JavaScript. Как вы могли слышать, JavaScript заработал довольно неоднозначную репутацию, когда речь идет о прокрутке страницы.

В новой спецификации CSS Scroll Snap Points обещают помочь с решением этой проблемы, благодаря чему реализовать этот функционал можно будет с помощью пары строк CSS.

Как и со всеми новыми веб-технологиями, данная спецификация со временем изменилась. Уже есть «старые» и «новые» свойства и значения. Судя по тому, что поддержка данной технологии подскочила очень быстро, у нее есть перспективы. А пока сама технология находится еще в промежуточной стадии, я научу вас создавать кроссбраузерные проекты на ее основе.

Демо с полифилом

На демо ниже представлена горизонтальная прокрутка. Прокрутка адаптивна: каждая «панель» по высоте и ширине совпадает с размером окна просмотра (благодаря единицами измерения vh и vw). В демо присутствует polyfill, но чтобы его использовать (поддержка очень низкая, поэтому я рекомендую), вам придется поддерживать «старые» значения. Именно поэтому я их сегодня также рассмотрю в этой статье.

При просмотре в Firefox: в этом браузере наилучшая поддержка. Вы можете четко наблюдать поведение данной технологии и ощущать ее.

При просмотре в Chrome и Opera: поддержки нет вовсе. Любое поведение демо в этих браузерах лежит полностью на полифиле.

При просмотре в Edge или IE: вообще не работает. Браузеры имеют частичную поддержку, но, по всей видимости, этого недостаточно для работы демо.

При просмотре на мобильных устройствах: есть поддержка в iOS 9 (тестировалось в iPhone 6), однако анимация во время докрутки довольно странная. В Chrome/Android поддержки нет, но тут за дело берется полифил, причем делает это не так уж и плохо (тестировалось на Android Nexus 6).

Обратите внимание на то, что в демо выше я использовал Autoprefixer для автоматического добавления всех необходимых вендорных префиксов. Ниже представлен код:

.scroller {
  
  scroll-snap-type: mandatory;

  /* устаревший вариант из спецификации */
  scroll-snap-destination: 0% 100%;
  scroll-snap-points-x: repeat(100%);
}

Совсем немного! Давайте разберем каждое свойство по отдельности.

Действующие свойства CSS Scroll Snap

scroll-snap-type

scroll-snap-type: none | mandatory | proximity;

Значение mandatory делает именно то, о чем вы подумали: экран прокручивается до ближайшей точки прилипания, даже когда пользователь не прокручивает экран. Если контент был как-либо изменен, страница заново отыщет точку прилипания.

Значение proximity близко по смыслу к mandatory, но менее строгое. Если был изменен размер окна браузера или добавлен новый контент, экран может найти, а может и не найти новую точку прилипания. Это зависит от того, насколько экран близко к точке прилипания.

Из то, что видел я, значение mandatory имеет более обширную поддержку в браузерах, а его поведение намного последовательнее.

scroll-snap-align

scroll-snap-align: [none | start | end | center] [none | start | end | center];

Свойство описывает то, как внешние отступы элемента с точкой прилипания выравниваются внутри родительского контейнера. Используются два значения Х и У. Если записать одно значение, это будет распознано как сокращение. В таком случае оба значения будут одинаковыми (как с padding, где padding: 10px; то же самое что padding: 10px 10px 10px 10px;). Данное свойство нельзя анимировать.

scroll-snap-padding

scroll-snap-padding: <length> | <percentage>;

Свойство относится к контейнеру прокрутки в окне браузера. Принцип работы такой же как с обычным padding, порядок значений также совпадает. К примеру, scroll-snap-padding: 75px 0 0; означает верхний паддинг в 75px, а все остальные 0. Свойство можно анимировать. Если вам захочется сдвинуть точку прилипания, вам поможет данное свойство.

Устаревшие свойства CSS Scroll Snap

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

scroll-snap-points

scroll-snap-points-<x or y>: none | repeat(<length>);

Свойство scroll-snap-point задает оси направления прокрутки. В первом демо выше у данного свойства стояло значение Х. В демо ниже мы установили значение У с помощью scroll-snap-points-y: repeat(100%); (т.к. прокрутка вертикальная). Проценты относятся к блоку с паддингом, и не важно, что вы задали его для контейнера прокрутки.

scroll-snap-destination

Это свойство и scroll-snap-coordinate очень похожи по значениям. Свойство scroll-snap-destination относится к родительскому элементу, а scroll-snap-coordinate – к самому элементу прокрутки. Задавать свойство scroll-snap-destination нужно только в том случае, если точка привязки определена самим элементом, а не его контейнером.

scroll-snap-destination: <position>;

С помощью этого свойства можно указать точку на экране, к которой будет прилипать прокрутка. К примеру, вы хотите урезать контент на 100px так, чтобы две панели отображались рядом. На рисунке ниже показано, как свойство scroll-snap-destination поможет вам настроить этот параметр.

Если значение задано в процентах, точка прилипания вычисляется от ширины и высоты контейнера.

scroll-snap-coordinate

scroll-snap-coordinate: none | <position>;

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

Последние два свойства scroll-snap-destination и scroll-snap-coordinate можно анимировать, а свойства scroll-snap-type и scroll-snap-points нет, что вполне логично.

Заключение

На момент написания статьи последнее обновление спецификации было всего месяц назад, и работа над ней продолжается. Поддержка еще не повсеместна, но даже если вам придется применить устаревшие значения для работы полифила, полученный код остается небольшим и красивым. Очень весело наблюдать за тем, что появляется в CSS, и если вы экспериментируете с новыми технологиями каким-либо образом, вам, определенно, необходимо сообщить авторам, что вы делаете или что вы выяснили – это повлияет на их работу. Я сам до сих пор думаю, стоит ли использовать что-то подобное в настоящих проектах. Это будет зависеть от того, готовы ли мы переписывать код в том случае, если в будущем что-то изменится. А пока что и полифил работает хорошо. Захватывающе наблюдать за тем, как подобные технологии появляются в CSS.

Автор: Sarah Drasner

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

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

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

Получить

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree