scroll-snap-type

Базовая Широко доступная

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

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

Попробуйте

Если содержимое в порте прокрутки изменится — например, если содержимое будет добавлено, перемещено, удалено или изменено размер — контейнер прокрутки будет повторно привязан к ранее привязанному содержимому, если это содержимое по-прежнему присутствует.

Если значение свойства, связанного с привязкой прокрутки, например scroll-snap-type или scroll-margin, будет изменено, контейнер прокрутки будет повторно привязан на основе текущего значения scroll-snap-type.

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

Синтаксис

/* No snapping */
scroll-snap-type: none;

/* Keyword values for snap axes */
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/* Optional keyword values for snap strictness */
/* mandatory | proximity */
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

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

Значения

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

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

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

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

scroll-snap-type = 
  none                                                |
  [ x | y | block | inline | both ] [ mandatory | proximity ]?

Примеры

Привязка по разным осям

HTML

<main>
  <section class="x mandatory-scroll-snapping" dir="ltr">
    <div>X Mand. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="x proximity-scroll-snapping" dir="ltr">
    <div>X Prox. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="y mandatory-scroll-snapping" dir="ltr">
    <div>Y Mand. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="y proximity-scroll-snapping" dir="ltr">
    <div>Y Prox. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="x mandatory-scroll-snapping" dir="rtl">
    <div>X Mand. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="x proximity-scroll-snapping" dir="rtl">
    <div>X Prox. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="y mandatory-scroll-snapping" dir="rtl">
    <div>Y Mand. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
  <section class="y proximity-scroll-snapping" dir="rtl">
    <div>Y Prox. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </section>
</main>

CSS

/* scroll-snap */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}
.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}
.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}
.y.proximity-scroll-snapping {
  scroll-snap-type: y proximity;
}

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

Результаты

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

Спецификация
CSS Scroll Snap Модуль Level 1 # scroll-snap-type

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`scroll-snap-type`	69	79 12–79 Edge поддерживает более ранний проект CSS Scroll Snap без значений осей.	99 68–99 На macOS Monterey привязка прокрутки не выполняется надёжно. См. баг 1749352. 39–68 Более ранний проект CSS Scroll Snap без значений осей.	56	11 9 Более старые версии Safari поддерживают более ранний проект CSS Scroll Snap без значений осей.	69	68 39–68 Более ранний проект CSS Scroll Snap без значений осей.	48	11 9 Более старые версии Safari поддерживают более ранний проект CSS Scroll Snap без значений осей.	10.0	69
`block`	69	79	68	56	≤13.1	69	68	48	≤13.4	10.0	69
`both`	69	79	68	56	≤13.1	69	68	48	≤13.4	10.0	69
`inline`	69	79	68	56	≤13.1	69	68	48	≤13.4	10.0	69
`none`	69	79	39	56	≤13.1	69	39	48	≤13.4	10.0	69
`x`	69	79	68	56	≤13.1	69	68	48	≤13.4	10.0	69
`y`	69	79	68	56	≤13.1	69	68	48	≤13.4	10.0	69

См. также

Другие свойства порта прокрутки: scroll-margin, scroll-padding
Свойства дочерних элементов прокрутки: scroll-snap-align, scroll-margin, scroll-snap-stop
Основные понятия CSS привязки прокрутки
Использование событий привязки прокрутки
CSS привязка прокрутки
Хорошо контролируемая прокрутка с помощью CSS привязки прокрутки

© 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-type