Введение в CSS Scroll Snap Points
Перед тем как представить CSS scroll, я хочу рассказать о существующем функционале, подстраивающем элемент под окно просмотра при прокручивании страницы. Для него необходимо использование JavaScript. Как вы знаете, JavaScript имеет репутацию очень сложного в работе, когда речь идет об обработке событий прокрутки.
Новая спецификация CSS Scroll Snap Points поможет решить эту проблему, используя для обработки такого поведения всего несколько строк CSS.
Эта спецификация с течением времени претерпела изменения. Появились "старые" и "новые" свойства и значения. И хотя нам обещают, что более полная поддержка будет реализована уже в самом скором времени, в этой статье я научу вас, как обеспечить максимальную поддержку scrolling CSS уже на переходной стадии.
Демо-версия полифилла
Приведенная ниже демо-версия имеет горизонтальную прокрутку. Весь элемент является адаптивным: каждая "панель" принимает ширину и высоту окна просмотра (благодаря единицам измерения vh и vw).
Здесь применен полифилл, но чтобы использовать его, я настоятельно рекомендую обеспечить поддержку "старых" значений. Именно поэтому я рассмотрю в этой статье и их.
Посмотреть демо-версию
Если вы просматриваете демо в Firefox: На данный момент этот браузер лучше всего поддерживает функцию, так что вы можете четко видеть, как выглядит и работает оригинальное поведение.
Если вы просматриваете демо в Chrome или Opera: Эти браузеры вообще не поддерживают CSS scroll модуль Scroll Snap, поэтому поведение, которое вы будете наблюдать в них, полностью задается полифиллом.
Если вы просматриваете демо в Edge или IE: Пример не будет работать вообще. Эти браузеры имеют частичную поддержку данного модуля, но не достаточную, чтобы обеспечить корректную работу Scroll Snap.
Если вы просматриваете демо на мобильном устройстве: iOS 9 поддерживает функцию (протестировано на iPhone 6), но я замечал, что в самом начале демо-версия работает довольно странно. Chrome / Android не поддерживают функцию, но с помощью полифилла демо-версию удается реализовать полностью (протестировано на Android Nexus 6).
Вот код, который приводит в действие всю магию:
.scroller {
scroll-snap-type: mandatory;
/* реализация старой спецификации */
scroll-snap-destination: 0% 100%;
scroll-snap-points-x: repeat(100%);
}Давайте разберем эти свойства одно за другим.
Свойства CSS Scroll Snap
scroll-snap-type: none | mandatory | proximity;Значение mandatory задает возвращение элемента прокрутки на точку привязки, даже если скроллинг не осуществлялся. Если контент был изменен или обновлен, страница снова находит точку привязки.
При заданном значении proximiti, если изменяется размер окна браузера или добавляется контент, элемент может не переключаться на новую точку, а отображаться частично. Все зависит от того, насколько близко край элемента располагается от точки переключения после внесенных изменений.
Чаще всего в браузерах поддерживается значение mandatory, так как оно определяет более последовательное поведение div scroll CSS.
scroll-snap-align
scroll-snap-align: [none | start | end | center] [none | start | end | center];Это свойство определяет, как отступ элемента скроллинга, выравнивается относительно родительского контейнера. Оно использует два значения - х и y. Если вы устанавливаете только одно значение, то оно будет рассматриваться как сокращенный синтаксис и автоматически присваиваться для всех параметров. Например, отступ padding: 10px равносилен padding: 10px 10px 10px 10px. Это свойство не может анимироваться.
scroll-snap-padding
scroll-snap-padding: <length> | <percentage>;Это свойство относится к контейнеру прокрутки окна просмотра. Оно работает так же, как обычный отступ с той же последовательностью присвоения значений. Например, <b>scroll-snap-padding</b>: 75px 0 0; задает верхний отступ 75 пикселей и все остальные по 0 пикселей. Это свойство поддерживает анимацию.
<h3>Старые свойства прокрутки CSS</h3>
Спецификации быстро меняются, и свойства, которые были действительными в прошлом году, сейчас уже считаются устаревшими. Хотя их все равно полезно рассмотреть с точки зрения поддержки.
<h4>scroll-snap-points</h4>
scroll-snap-points-<x или y>: none | repeat(<длина>);scroll-snap-point относится к оси, которая задает направление прокрутки (CSS scroll x). В первом приведенном примере мы видели, что это свойство задавалось для оси х. В приведенном ниже примере оно установлено для оси у (так как здесь мы имеем вертикальную прокрутку) с помощью правила 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>;Это свойство позволяет определить, в какой момент при scrolling CSS элемента должно происходить переключение на другую точку. Например, если вы хотите, чтобы при скроллинге на 100 пикселей прокручиваемый контент переключался и перемещался до следующей точки. На приведенной ниже диаграмме показано, как с помощью этого свойства можно настроить данный параметр:
Когда значения для этого свойства заданы в процентах, точка определяется относительно ширины и высоты контейнера прокрутки.
scroll-snap-coordinate
scroll-snap-coordinate: none | <position>;Это свойство позволяет указать, где в самом элементе устанавливается точка переключения CSS background scroll. Значение позиции связано со стороной элемента. scroll-snap-coordinate - это единственное свойство, которое может применяться ко всем элементам на странице. Все остальные свойства скроллинга применяются только к контейнеру прокрутки:
Свойства, scroll-snap-destination и scroll-snap-coordinate могут быть анимированы, в то время как scroll-snap-type и scroll-snap-points - нет.
Дополнительные ресурсы
Рабочий проект для CSS Scroll Snap Points Module Level 1
Материалы по MDN
Статья в блоге WebKit
Коллекция на CodePen
Заключение
С момента написания этой статьи спецификация снова была обновлена и все еще продолжает изменяться. Повсеместная поддержка этого модуля пока еще не реализована, но даже если вам нужно учитывать устаревшие значения, для которых необходимо использовать полифилл, то код, с помощью которого она реализуется, все равно очень компактный. Я до сих пор не определилась относительно того, использовать ли подобные инструменты CSS scroll в своих проектах. Это зависит от того, насколько вы готовы перерабатывать код по мере того, как ситуация в будущем будет меняться. В то же время, не могу не отметить, что полифилл работает очень хорошо, всегда приятно видеть подобные вещи в CSS.