scroll-snap-stop

Свойство scroll-snap-stop CSS определяет, разрешено ли контейнеру прокрутки "пропускать" возможные позиции привязки.

Попробовать

Синтаксис

/* Keyword values */
scroll-snap-stop: normal;
scroll-snap-stop: always;

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

Значения

normal: Когда визуальное окно просмотра контейнера прокрутки этого элемента прокручивается, он может "пропускать" возможные позиции привязки.
always: Контейнер прокрутки не должен "пропускать" возможную позицию привязки; он должен привязываться к первой позиции привязки этого элемента.

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

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

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

scroll-snap-stop = 
  normal  |
  always

Примеры

Настройка различных остановок привязки

В приведенном ниже примере демонстрируется контраст между значениями always и normal свойства scroll-snap-stop. Разница в этих scroll-snap-stop значениях более заметна, когда свойство scroll-snap-type установлено в значение mandatory, что используется в этом примере.

HTML

<p>scroll-snap-stop: always (X Mandatory)</p>
<div class="x mandatory-scroll-snapping always-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: always (X Mandatory) on odd child elements</p>
<div class="x mandatory-scroll-snapping always-stop-odd">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: always (X Mandatory) on even child elements</p>
<div class="x mandatory-scroll-snapping always-stop-even">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: normal (X Mandatory)</p>
<div class="x mandatory-scroll-snapping normal-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: always (Y Mandatory)</p>
<div class="y mandatory-scroll-snapping always-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: normal (Y Mandatory)</p>
<div class="y mandatory-scroll-snapping normal-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

CSS

/* setting up mandatory scroll-snap on parent */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

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

/* defining scroll-snap alignment on children */
div > div {
  scroll-snap-align: center;
}

/* defining scroll-snap stop on children */
.always-stop > div {
  scroll-snap-stop: always;
}

.always-stop-odd > div:nth-of-type(odd) {
  scroll-snap-stop: always;
}

.always-stop-even > div:nth-of-type(even) {
  scroll-snap-stop: always;
}

.normal-stop > div {
  scroll-snap-stop: normal;
}

Результат

Прокручивайте влево-вправо и сверху-вниз в соответствующих полях X и Y. В полях X и Y, где свойство scroll-snap-stop установлено в always, прокрутка принудительно останавливается на точке привязки, даже при быстрой прокрутке. Однако в полях, где свойство scroll-snap-stop установлено в normal, точки привязки пропускаются при быстрой прокрутке.

При необходимости можно избирательно останавливать элементы внутри контейнера прокрутки. Это показано в приведенном ниже примере, где нацелены нечетные и четные элементы; вы можете выбрать другую стратегию в зависимости от своих потребностей. В приведенном ниже примере прокрутка не "пропускает" нечетные и четные элементы во втором и третьем полях, соответственно.

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`scroll-snap-stop`	75	79	103	62	15	75	103	54	15	11.0	75
`always`	75	79	103	62	15	75	103	54	15	11.0	75
`normal`	75	79	103	62	15	75	103	54	15	11.0	75

См. также

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