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

Рабочий стол

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

Ресурсы

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