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

Anonim

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

Це корисно, якщо ви хочете зупинити браузер у певних точках сторінки. Наприклад: Користувач, який переглядає фотогалерею, ймовірно, не хоче прокручувати зображення на півдорозі - швидше за все, він бажав би, щоб зображення "прив'язувалось" до потрібного місця під час прокрутки. Прив'язка прокрутки надає розробникам спосіб використання CSS із чистою CSS.

scroll-snap-typeє необхідною властивістю будь-якого прокручуваного контейнера, до якого потрібно додати прив'язку прокрутки. Він відповідає на три запитання щодо контейнера для прокрутки:

  1. Чи використовує контейнер прив'язку прокрутки?
  2. На якій осі - x (горизонтальна), y (вертикальна), блокована або вбудована - слід застосовувати прив'язку прокрутки?
  3. Як має поводитися прив'язка прокрутки? Це примусово 100% часу, чи воно набуває чинності лише тоді, коли користувач потрапляє "досить близько" до позиції прив'язки? Про це далі.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Синтаксис

scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )

Цінності

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

  • none вимикає прив'язку прокрутки -.
  • x дозволяє прив'язку прокрутки лише по осі x.
  • y дозволяє прив'язку прокрутки лише по осі y.
  • block дозволяє прив'язку прокрутки лише по осі блоку.
  • inline дозволяє прив'язку прокрутки лише по вбудованій осі.
  • bothдозволяє прив'язку прокрутки вздовж обох осей (яку ви можете уявити як xта y, або inlineта block.
  • mandatory - це значення строгості, яке говорить браузеру завжди переходити в позицію прив’язки, коли прокрутка не відбувається.
  • proximity- це значення строгості, яке вказує браузеру перейти в позицію прив'язки, якщо дія прокрутки наближається до позиції прив'язки. Якщо це не досить близько, тоді браузер не повинен клацати, а прокрутка буде поводитися нормально.

Приклад

Див. Приклад типу прокрутки ручки
від CSS-Tricks (@ css-tricks) на CodePen.

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

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

Робочий стіл

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

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

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

Пов’язані

  • scroll-padding
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Ресурси

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