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

Від автора: до появи цієї технології на CSS, про яку ми сьогодні будемо з вами говорити, для виявлення елемента у вікні браузера під час прокрутки потрібно було підключати JavaScript. Як ви могли чути, JavaScript заробив досить неоднозначну репутацію, коли мова йде про прокручуванні сторінки.

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

Як і з усіма новими веб-технологіями, дана специфікація з часом змінилася. Вже є «старі» і «нові» властивості та значення. Судячи з того, що підтримка цієї технології підскочила дуже швидко, у неї є перспективи. А поки сама технологія знаходиться ще в проміжній стадії, я навчу вас створювати кросбраузерні проекти на її основі.

Демо з полілфілом

На демо нижче представлена горизонтальна прокрутка. Прокрутка адаптивна: кожна панель по висоті і ширині збігається з розміром вікна перегляду (завдяки одиницями вимірювання vh і vw). У демо присутній polyfill, але щоб його використовувати (підтримка дуже низька, тому я рекомендую), вам доведеться підтримувати «старі» значення. Саме тому я їх сьогодні також розгляну в цій статті.

Зверніть увагу на те, що в демо вище я використовував 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: | ;

Властивість відноситься до контейнера прокрутки у вікні браузера. Принцип роботи такий же, як із звичайним 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 допоможе вам налаштувати цей параметр.

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

scroll-snap-coordinate

scroll-snap-coordinate: none | ;

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

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

Висновок

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