От автора: до появления этой технологии на 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 для автоматического добавления всех необходимых вендорных префиксов. Ниже представлен код:
|
1 2 3 4 5 6 7 8 |
.scroller { scroll-snap-type: mandatory; /* устаревший вариант из спецификации */ scroll-snap-destination: 0% 100%; scroll-snap-points-x: repeat(100%); } |
Совсем немного! Давайте разберем каждое свойство по отдельности.
Действующие свойства CSS Scroll Snap
scroll-snap-type
|
1 |
scroll-snap-type: none | mandatory | proximity; |
Значение mandatory делает именно то, о чем вы подумали: экран прокручивается до ближайшей точки прилипания, даже когда пользователь не прокручивает экран. Если контент был как-либо изменен, страница заново отыщет точку прилипания.
Значение proximity близко по смыслу к mandatory, но менее строгое. Если был изменен размер окна браузера или добавлен новый контент, экран может найти, а может и не найти новую точку прилипания. Это зависит от того, насколько экран близко к точке прилипания.
Из то, что видел я, значение mandatory имеет более обширную поддержку в браузерах, а его поведение намного последовательнее.
scroll-snap-align
|
1 |
scroll-snap-align: [none | start | end | center] [none | start | end | center]; |
Свойство описывает то, как внешние отступы элемента с точкой прилипания выравниваются внутри родительского контейнера. Используются два значения Х и У. Если записать одно значение, это будет распознано как сокращение. В таком случае оба значения будут одинаковыми (как с padding, где padding: 10px; то же самое что padding: 10px 10px 10px 10px;). Данное свойство нельзя анимировать.
scroll-snap-padding
|
1 |
scroll-snap-padding: <length> | <percentage>; |
Свойство относится к контейнеру прокрутки в окне браузера. Принцип работы такой же как с обычным padding, порядок значений также совпадает. К примеру, scroll-snap-padding: 75px 0 0; означает верхний паддинг в 75px, а все остальные 0. Свойство можно анимировать. Если вам захочется сдвинуть точку прилипания, вам поможет данное свойство.
Устаревшие свойства CSS Scroll Snap
Как говорилось выше, за прошлый год спецификация изменялась стремительно, и уже появились свойства, которые считаются устаревшими. Хотя их все же стоит знать для поддержки старых браузеров.
scroll-snap-points
|
1 |
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 нужно только в том случае, если точка привязки определена самим элементом, а не его контейнером.
|
1 |
scroll-snap-destination: <position>; |
С помощью этого свойства можно указать точку на экране, к которой будет прилипать прокрутка. К примеру, вы хотите урезать контент на 100px так, чтобы две панели отображались рядом. На рисунке ниже показано, как свойство scroll-snap-destination поможет вам настроить этот параметр.
Если значение задано в процентах, точка прилипания вычисляется от ширины и высоты контейнера.
scroll-snap-coordinate
|
1 |
scroll-snap-coordinate: none | <position>; |
С помощью этого свойства можно задать, где экран должен прилипнуть к элементу. Возможные позиции расположены внутри самого элемента и его рамки. Данное свойство вам не потребуется, если только вы не делаете что-то необычное. scroll-snap-coordinate – единственное свойство, которое можно применить ко всем элементам на странице, все остальные свойства применимы только к контейнеру прокрутки.
Последние два свойства scroll-snap-destination и scroll-snap-coordinate можно анимировать, а свойства scroll-snap-type и scroll-snap-points нет, что вполне логично.
Заключение
На момент написания статьи последнее обновление спецификации было всего месяц назад, и работа над ней продолжается. Поддержка еще не повсеместна, но даже если вам придется применить устаревшие значения для работы полифила, полученный код остается небольшим и красивым. Очень весело наблюдать за тем, что появляется в CSS, и если вы экспериментируете с новыми технологиями каким-либо образом, вам, определенно, необходимо сообщить авторам, что вы делаете или что вы выяснили – это повлияет на их работу. Я сам до сих пор думаю, стоит ли использовать что-то подобное в настоящих проектах. Это будет зависеть от того, готовы ли мы переписывать код в том случае, если в будущем что-то изменится. А пока что и полифил работает хорошо. Захватывающе наблюдать за тем, как подобные технологии появляются в CSS.
Автор: Sarah Drasner
Источник: //css-tricks.com/
Редакция: Команда webformyself.
