scroll-snap-align

Базовая линия Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Свойство scroll-snap-align определяет позицию захвата элемента, как выравнивание его области захвата (как выравниваемого элемента) внутри области захвата контейнера (как контейнера для выравнивания).

Попробовать

Синтаксис

/* Single keyword value */
scroll-snap-align: none;
scroll-snap-align: center;
scroll-snap-align: start;
scroll-snap-align: end;

/* Two keyword values */
scroll-snap-align: start end;
scroll-snap-align: end center;
scroll-snap-align: center start;

/* Global values */
scroll-snap-align: inherit;
scroll-snap-align: initial;
scroll-snap-align: revert;
scroll-snap-align: revert-layer;
scroll-snap-align: unset;

Значения

Для свойства scroll-snap-align можно указать одно или два значения. Если задано одно значение, оно применяется к обеим осям (блочной и строчной). Если задано два значения, первое значение управляет блочной осью, а второе — строчной осью.

none: Элемент не определяет позицию захвата по данной оси.
start: Начальное выравнивание области захвата этого элемента в рамках области захвата контейнера прокрутки — позиция захвата по этой оси.
end: Конечное выравнивание области захвата этого элемента в рамках области захвата контейнера прокрутки — позиция захвата по этой оси.
center: Центрированное выравнивание области захвата этого элемента в рамках области захвата контейнера прокрутки — позиция захвата по этой оси.

Формальное определение

Начальное значение	`none`
Применяется к	всем элементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	дискретный

Формальный синтаксис

scroll-snap-align = 
  [ none | start | end | center ]{1,2}

Спецификации

Спецификация
CSS Scroll Snap Module Level 1 # scroll-snap-align

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`scroll-snap-align`	69	79	68	56	11	69	68	48	11	10.0	69
`center`	69	79	68	56	11	69	68	48	11	10.0	69
`end`	69	79	68	56	11	69	68	48	11	10.0	69
`none`	69	79	68	56	11	69	68	48	11	10.0	69
`start`	69	79	68	56	11	69	68	48	11	10.0	69

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align