Прокрутка-вирівнювання прив'язки - CSS-хитрощі

Anonim

scroll-snap-alignє частиною модуля CSS Scroll Snap. Прив'язка прокрутки означає "блокування" положення області перегляду до певних елементів на сторінці, коли прокручується вікно (або прокручуваний контейнер). Подумайте про контейнер для прокрутки, як надягання магніту поверх елемента, який прилипає до верхньої частини області перегляду, і змушує сторінку зупинити прокрутку саме там.

scroll-snap-alignє обов’язковою властивістю елемента, що прив’язує прокрутку в контейнері прив’язки прокрутки. Для отримання додаткової інформації про контейнери, що закріплюють прокрутку, див. scroll-snap-typeЗапис альманаху. scroll-snap-alignповідомляє браузер , яка частина елемента повинні бути вирівняним , коли хватка точка зустрічається: У разі , якщо елемент прив'язка до start, centerабо endз батьківського контейнера , який містить scroll-snap-typeвластивість?

Якщо ви хочете, щоб елемент закріпився на місці на початку цього елемента, надайте йому таке scroll-snap-alignзначення:

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-align: start; )

Синтаксис

scroll-snap-align: ( none | start | end | center )(1,2)

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

Цінності

scroll-snap-align приймає такі значення:

  • none вимикає прив'язку прокрутки до елемента
  • start вирівнює початок елемента зі швидким портом контейнера прокрутки, коли він вставлений на місце
  • end вирівнює кінець елемента за допомогою прив'язки контейнера прокрутки, коли він вставлений на місце
  • center вирівнює центр елемента з прикріпленням контейнера прокрутки, коли він вставлений на місце

Приклад

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.

Робочий стіл

Chrome Firefox IE Край Сафарі
69 68 11 * 79 11

Мобільний / планшетний

Android Chrome Android Firefox Android iOS Safari
88 85 81 11,0-11,2

Пов’язані

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-stop

Ресурси

  • Рекомендація кандидата у програму CS3 Scroll Snap
  • Практичне прив'язування прокрутки CSS
  • Представляємо точки прив'язки CSS Scroll