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

13

Від автора: до появи цієї технології на 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;). Дана властивість не можна анімувати.

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

scroll-snap-padding

scroll-snap-padding: | ;

Властивість відноситься до контейнера прокрутки у вікні браузера. Принцип роботи такий же, як із звичайним padding, порядок значень також збігається. Приміром, scroll-snap-padding: 75px 0 0; означає верхній паддінґ в 75px, а всі інші 0. Властивість можна анімувати. Якщо вам захочеться зрушити точку прилипання, вам допоможе дана властивість.

Застарілі властивості CSS Scroll Snap

Як говорилося вище, за минулий рік специфікація стрімко змінювалася, і вже з’явилися властивості, які вважаються застарілими. Хоча їх все ж таки варто знати для підтримки старих браузерів.

scroll-snap-points

scroll-snap-points-: none | repeat();

Властивість 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: ;

З допомогою цієї властивості можна вказати точку на екрані, до якої буде прилипати прокрутка. Наприклад, ви хочете урізати контент на 100px так, щоб дві панелі відображалися поруч. На малюнку нижче показано, як властивість scroll-snap-destination допоможе вам налаштувати цей параметр.

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

Якщо задано значення у відсотках, точка прилипання обчислюється від ширини і висоти контейнера.

scroll-snap-coordinate

scroll-snap-coordinate: none | ;

З допомогою цієї властивості можна задати, де екран повинен прилипнути до елементу. Можливі позиції розташовані всередині самого елемента та його рамки. Дана властивість вам не потрібно, якщо тільки ви не робите щось незвичайне. scroll-snap-coordinate – єдине властивість, яке можна застосувати до всіх елементів на сторінці, всі інші властивості застосовні тільки до контейнера прокрутки.

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

Останні дві властивості scroll-snap-destination і scroll-snap-coordinate можна анімувати, а властивості scroll-snap-type і scroll-snap-points немає, що цілком логічно.

Висновок

На момент написання статті останнє оновлення специфікації було всього місяць тому, і робота над нею триває. Підтримка ще не повсюдна, але навіть якщо вам доведеться застосувати застарілі значення для роботи полифила, отриманий код залишається невеликою і красивим. Дуже весело спостерігати за тим, що з’являється в CSS, і якщо ви експериментуєте з новими технологіями яким-небудь чином, вам, безумовно, необхідно повідомити авторам, що ви робите або що ви з’ясували – це вплине на їх роботу. Я сам досі думаю, варто використовувати щось подібне у цих проектах. Це буде залежати від того, чи готові ми переписувати код в тому випадку, якщо в майбутньому щось зміниться. А поки що і полифил працює добре. Захоплююче спостерігати за тим, як подібні технології з’являються в CSS.