Тип прокрутки - CSS-хитрости

Anonim

scroll-snap-typeСвойство является частью 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- это значение строгости, которое указывает браузеру перейти в позицию привязки, если действие прокрутки приближается к позиции привязки. Если это не совсем близко, браузер не должен щелкать, и прокрутка будет работать нормально.

Пример

См. Пример типа Pen scroll-snap-type
от CSS-Tricks (@ css-tricks) на CodePen.

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.

Рабочий стол

Хром Fire Fox 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

Ресурсы

  • CSS Scroll Snap - кандидат в рекомендации W3C
  • Практическая привязка прокрутки CSS
  • Введение в точки привязки прокрутки CSS