Тип привязки прокрутки

Классы snap-x, snap-y, snap-both, snap-mandatory, snap-proximity и snap-none задают scroll-snap-type — привязку прокрутки контейнера к его элементам. Берите их для каруселей, галерей и пошаговых лент, где прокрутка должна останавливаться на целом элементе, а не посередине.

Пример

Строгость

Прокрутите ленты вбок и отпустите между карточками. С snap-mandatory лента всегда доезжает до карточки, с snap-proximity — только если карточка близко, с snap-none останавливается где угодно. У карточек стоит snap-start.

snap-x snap-mandatory

snap-x snap-proximity

snap-none

HTML

<div class="flex flex-col gap-3">
  <div class="flex flex-col gap-1">
    <div class="flex gap-2 overflow-auto p-2 radius-ui border border-outline-variant bg-surface snap-x snap-mandatory" tabindex="0" aria-label="Прокручиваемая полоса snap-x snap-mandatory">
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-primary-container color-on-primary-container">1</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-secondary-container color-on-secondary-container">2</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-tertiary-container color-on-tertiary-container">3</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-success-container color-on-success-container">4</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-warning-container color-on-warning-container">5</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-error-container color-on-error-container">6</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-primary-container color-on-primary-container">7</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-secondary-container color-on-secondary-container">8</div>
    </div>
    <code class="text-1/2 color-on-surface-variant">snap-x snap-mandatory</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="flex gap-2 overflow-auto p-2 radius-ui border border-outline-variant bg-surface snap-x snap-proximity" tabindex="0" aria-label="Прокручиваемая полоса snap-x snap-proximity">
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-primary-container color-on-primary-container">1</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-secondary-container color-on-secondary-container">2</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-tertiary-container color-on-tertiary-container">3</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-success-container color-on-success-container">4</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-warning-container color-on-warning-container">5</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-error-container color-on-error-container">6</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-primary-container color-on-primary-container">7</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-secondary-container color-on-secondary-container">8</div>
    </div>
    <code class="text-1/2 color-on-surface-variant">snap-x snap-proximity</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="flex gap-2 overflow-auto p-2 radius-ui border border-outline-variant bg-surface snap-none" tabindex="0" aria-label="Прокручиваемая полоса snap-none">
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-primary-container color-on-primary-container">1</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-secondary-container color-on-secondary-container">2</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-tertiary-container color-on-tertiary-container">3</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-success-container color-on-success-container">4</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-warning-container color-on-warning-container">5</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-error-container color-on-error-container">6</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-primary-container color-on-primary-container">7</div>
      <div class="snap-start shrink-none w-e8 h-d8 p-2 radius-ui bg-secondary-container color-on-secondary-container">8</div>
    </div>
    <code class="text-1/2 color-on-surface-variant">snap-none</code>
  </div>
</div>

Вертикальная ось

snap-y привязывает вертикальную прокрутку. Прокрутите список и отпустите рядом с началом пункта.

snap-y

HTML

<div class="flex flex-col gap-1">
  <div class="flex flex-col gap-2 h-e8 overflow-auto p-2 radius-ui border border-outline-variant bg-surface snap-y" tabindex="0" aria-label="Прокручиваемый список snap-y">
    <div class="snap-start shrink-none h-d8 p-2 radius-ui bg-primary-container color-on-primary-container">1</div>
    <div class="snap-start shrink-none h-d8 p-2 radius-ui bg-secondary-container color-on-secondary-container">2</div>
    <div class="snap-start shrink-none h-d8 p-2 radius-ui bg-tertiary-container color-on-tertiary-container">3</div>
    <div class="snap-start shrink-none h-d8 p-2 radius-ui bg-success-container color-on-success-container">4</div>
    <div class="snap-start shrink-none h-d8 p-2 radius-ui bg-warning-container color-on-warning-container">5</div>
    <div class="snap-start shrink-none h-d8 p-2 radius-ui bg-error-container color-on-error-container">6</div>
    <div class="snap-start shrink-none h-d8 p-2 radius-ui bg-primary-container color-on-primary-container">7</div>
    <div class="snap-start shrink-none h-d8 p-2 radius-ui bg-secondary-container color-on-secondary-container">8</div>
  </div>
  <code class="text-1/2 color-on-surface-variant">snap-y</code>
</div>

Классы

Класс	CSS	Значения
`snap-x`	`scroll-snap-type: x`	—
`snap-y`	`scroll-snap-type: y`	—
`snap-both`	`scroll-snap-type: both`	—
`snap-mandatory`	`scroll-snap-type: x mandatory`	—
`snap-proximity`	`scroll-snap-type: x proximity`	—
`snap-none`	`scroll-snap-type: none`	—

Условия (что это): ширина экрана — нет; состояния — нет.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

Контейнер и элементы

Тип привязки ставят на прокручиваемый контейнер, а точку привязки — на его элементы классами выравнивания привязки. Без класса выравнивания на элементах привязки нет.

HTML

<div class="flex gap-2 overflow-auto snap-x snap-mandatory">
  <div class="snap-start shrink-none w-f4">…</div>
  <div class="snap-start shrink-none w-f4">…</div>
</div>

Выбор оси и строгости

Класс	Когда брать
`snap-x`	горизонтальная лента; строгость — по умолчанию браузера (мягкая)
`snap-y`	вертикальный список или полноэкранные слайды
`snap-both`	область, которая прокручивается в обе стороны
`snap-mandatory`	горизонтальная лента, которая всегда останавливается на элементе
`snap-proximity`	горизонтальная лента с привязкой только рядом с элементом
`snap-none`	отключить привязку

Ограничения

snap-mandatory и snap-proximity задают ось сами — всегда x. С snap-y или snap-both их не сочетают: класс заменит ось на горизонтальную. Для вертикальной строгой привязки задайте scroll-snap-type: y mandatory в стилях проекта.
У семейства нет префиксов ширины экрана и состояния.

Навигация

Главное

Документация

Содержание

Тип привязки прокрутки

Пример

Строгость

Вертикальная ось

Классы

Применение

Контейнер и элементы

Выбор оси и строгости

Ограничения

См. также

Settings