scroll-snap-type

CSS свойство scroll-snap-type определяет как строго прокрутка контейнера привязывается к  точкам привязки.

Это свойство не уточняет какие именно анимации используются для привязки прокрутки, это остаётся за агентом пользователя.

/* Ключевые слова */
scroll-snap-type: none;
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/* Опционально mandatory | proximity*/
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

/* и т.д. */

/* Глобальные значения */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: unset;
Начальное значениеnone
Применяется квсе элементы
Наследуетсянет
Обработка значениякак указано
Animation typediscrete

Синтаксис

Значения

none
Когда визуальный viewport этого контейнера прокручивается, точки прокрутки игнорируются.
x
Прокрутка контейнера привязывается только по горизонтальной оси.
y
Прокрутка контейнера привязывается только по вертикальной оси.
block
Прокрутка контейнера привязывается только по блоковой оси.
inline
Прокрутка контейнера привязывается только по строчной оси.
both
Прокрутка контейнера независимо привязывается только по обоим осям (потенциально может привязываться к разным элементам на разных осях).
mandatory
Визуальный viewport контейнера остаётся на точке привязки, если он в данный момент не прокручивается. То есть он привязывается к точке, когда прокручивание завершилось. Если контент добавлен, перемещён, удалён или если изменён его размер, прокрутка будет отрегулирована так, чтобы оставаться на этой же точке.
proximity
Визуальный viewport контейнера может оставаться на точке привязки, если он в данный момент не прокручивается, в зависимости от параметров пользовательского агента. Если контент добавлен, перемещён, удалён или если изменён его размер, прокрутка может быть отрегулирована так, чтобы оставаться на этой же точке.

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

none | [ x | y | block | inline | both ] [ mandatory | proximity ]?

Пример

HTML

<div class="holster">
<div class="container x mandatory-scroll-snapping" dir="ltr">
  <div>X Mand. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container x proximity-scroll-snapping" dir="ltr">
  <div>X Prox. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y mandatory-scroll-snapping" dir="ltr">
  <div>Y Mand. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y proximity-scroll-snapping" dir="ltr">
  <div>Y Prox. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container x mandatory-scroll-snapping" dir="rtl">
  <div>X Mand. RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container x proximity-scroll-snapping" dir="rtl">
  <div>X Prox. RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y mandatory-scroll-snapping" dir="rtl">
  <div>Y Mand. RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y proximity-scroll-snapping" dir="rtl">
  <div>Y Prox. RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
</div>

CSS

/* setup */
html, body, .holster {
  height: 100%;
}
.holster {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: monospace;
}

.container {
  display: flex;
  overflow: auto;
  outline: 1px dashed lightgray;
  flex: none;
}

.container.x {
  width: 100%;
  height: 128px;
  flex-flow: row nowrap;
}

.container.y {
  width: 256px;
  height: 256px;
  flex-flow: column nowrap;
}
/* scroll-snap */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}

.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}

.y.proximity-scroll-snapping {
  scroll-snap-type: y proximity;
}

.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.x.container > div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}

.y.container > div {
  line-height: 256px;
  font-size: 128px;
  width: 256px;
  height: 100%;
}
/* appearance fixes */
.y.container > div:first-child {
  line-height: 1.3;
  font-size: 64px;
}
/* coloration */
.container > div:nth-child(even) {
  background-color: #87EA87;
}

.container > div:nth-child(odd) {
  background-color: #87CCEA;
}

Результат

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

Спецификация Статус Комментарий
CSS Scroll Snap Module Level 1
Определение 'scroll-snap-type' в этой спецификации.
Кандидат в рекомендации Initial definition

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
scroll-snap-typeChrome Полная поддержка 69Edge Полная поддержка 12
С префиксом Замечания
Полная поддержка 12
С префиксом Замечания
С префиксом Требует вендорный префикс: -ms-
Замечания Edge supports an earlier draft of CSS Scroll Snap without axis values.
Firefox Полная поддержка 68
Полная поддержка 68
Нет поддержки 39 — 68
Замечания
Замечания An earlier draft of CSS Scroll Snap without axis values.
IE Полная поддержка 10
С префиксом Замечания
Полная поддержка 10
С префиксом Замечания
С префиксом Требует вендорный префикс: -ms-
Замечания Internet Explorer supports an earlier draft of CSS Scroll Snap without axis values.
Opera Полная поддержка 56Safari Полная поддержка 11
Полная поддержка 11
Полная поддержка 9
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Older Safari versions support an earlier draft of CSS Scroll Snap without axis values.
WebView Android Полная поддержка 69Chrome Android Полная поддержка 69Firefox Android Полная поддержка 68
Полная поддержка 68
Нет поддержки 39 — 68
Замечания
Замечания An earlier draft of CSS Scroll Snap without axis values.
Opera Android Полная поддержка 48Safari iOS Полная поддержка 11
Полная поддержка 11
Полная поддержка 9
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Older Safari versions support an earlier draft of CSS Scroll Snap without axis values.
Samsung Internet Android Полная поддержка 10.0

Легенда

Полная поддержка  
Полная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.