Выравнивание привязки прокрутки

Классы snap-start, snap-center, snap-end и snap-align-none задают scroll-snap-align — точку элемента, которую привязка прокрутки совмещает с контейнером. Ставьте их на элементы контейнера с типом привязки.

Пример

Прокрутите ленты вбок и отпустите. Подпись — класс на карточках: карточка останавливается у начала ленты, по её центру или у конца.

snap-start

snap-center

snap-end

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-start">
      <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-start</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-mandatory" tabindex="0" aria-label="Прокручиваемая полоса snap-center">
      <div class="snap-center shrink-none w-e8 h-d8 p-2 radius-ui bg-primary-container color-on-primary-container">1</div>
      <div class="snap-center shrink-none w-e8 h-d8 p-2 radius-ui bg-secondary-container color-on-secondary-container">2</div>
      <div class="snap-center shrink-none w-e8 h-d8 p-2 radius-ui bg-tertiary-container color-on-tertiary-container">3</div>
      <div class="snap-center shrink-none w-e8 h-d8 p-2 radius-ui bg-success-container color-on-success-container">4</div>
      <div class="snap-center shrink-none w-e8 h-d8 p-2 radius-ui bg-warning-container color-on-warning-container">5</div>
      <div class="snap-center shrink-none w-e8 h-d8 p-2 radius-ui bg-error-container color-on-error-container">6</div>
      <div class="snap-center shrink-none w-e8 h-d8 p-2 radius-ui bg-primary-container color-on-primary-container">7</div>
      <div class="snap-center 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-center</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-mandatory" tabindex="0" aria-label="Прокручиваемая полоса snap-end">
      <div class="snap-end shrink-none w-e8 h-d8 p-2 radius-ui bg-primary-container color-on-primary-container">1</div>
      <div class="snap-end shrink-none w-e8 h-d8 p-2 radius-ui bg-secondary-container color-on-secondary-container">2</div>
      <div class="snap-end shrink-none w-e8 h-d8 p-2 radius-ui bg-tertiary-container color-on-tertiary-container">3</div>
      <div class="snap-end shrink-none w-e8 h-d8 p-2 radius-ui bg-success-container color-on-success-container">4</div>
      <div class="snap-end shrink-none w-e8 h-d8 p-2 radius-ui bg-warning-container color-on-warning-container">5</div>
      <div class="snap-end shrink-none w-e8 h-d8 p-2 radius-ui bg-error-container color-on-error-container">6</div>
      <div class="snap-end shrink-none w-e8 h-d8 p-2 radius-ui bg-primary-container color-on-primary-container">7</div>
      <div class="snap-end 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-end</code>
  </div>
</div>

Классы

Класс	CSS	Значения
`snap-start`	`scroll-snap-align: start`	—
`snap-end`	`scroll-snap-align: end`	—
`snap-center`	`scroll-snap-align: center`	—
`snap-align-none`	`scroll-snap-align: none`	—

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

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

Применение

Выбор выравнивания

Класс	Карточка останавливается
`snap-start`	у начала контейнера — для лент, которые читают слева направо
`snap-center`	по центру — для каруселей с одной карточкой в фокусе
`snap-end`	у конца контейнера
`snap-align-none`	не привязывается — для отдельных элементов в ленте

HTML

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

Зазор между краем контейнера и карточкой задают внутренний и внешний отступы прокрутки.

Ограничения

Без типа привязки на контейнере классы ничего не делают.
start и end — логические края: в горизонтальной ленте при письме справа налево начало находится справа.
У семейства нет префиксов ширины экрана и состояния.

Навигация

Главное

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

Содержание