Ограничитель прокрутки

Классы snap-always и snap-normal задают scroll-snap-stop — может ли быстрая прокрутка проскочить элемент с привязкой. Берите snap-always для пошаговых лент и слайдов, где нельзя пропустить шаг.

Пример

Прокрутите ленты резким движением — свайпом на тачпаде или пальцем. Карточки шириной во всю ленту; с snap-normal лента может пролететь несколько карточек, с snap-always останавливается на следующей.

snap-normal

snap-always

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-normal">
      <div class="snap-start snap-normal shrink-none w-full h-d8 p-2 radius-ui bg-primary-container color-on-primary-container">1</div>
      <div class="snap-start snap-normal shrink-none w-full h-d8 p-2 radius-ui bg-secondary-container color-on-secondary-container">2</div>
      <div class="snap-start snap-normal shrink-none w-full h-d8 p-2 radius-ui bg-tertiary-container color-on-tertiary-container">3</div>
      <div class="snap-start snap-normal shrink-none w-full h-d8 p-2 radius-ui bg-success-container color-on-success-container">4</div>
      <div class="snap-start snap-normal shrink-none w-full h-d8 p-2 radius-ui bg-warning-container color-on-warning-container">5</div>
      <div class="snap-start snap-normal shrink-none w-full h-d8 p-2 radius-ui bg-error-container color-on-error-container">6</div>
      <div class="snap-start snap-normal shrink-none w-full h-d8 p-2 radius-ui bg-primary-container color-on-primary-container">7</div>
      <div class="snap-start snap-normal shrink-none w-full 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-normal</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-always">
      <div class="snap-start snap-always shrink-none w-full h-d8 p-2 radius-ui bg-primary-container color-on-primary-container">1</div>
      <div class="snap-start snap-always shrink-none w-full h-d8 p-2 radius-ui bg-secondary-container color-on-secondary-container">2</div>
      <div class="snap-start snap-always shrink-none w-full h-d8 p-2 radius-ui bg-tertiary-container color-on-tertiary-container">3</div>
      <div class="snap-start snap-always shrink-none w-full h-d8 p-2 radius-ui bg-success-container color-on-success-container">4</div>
      <div class="snap-start snap-always shrink-none w-full h-d8 p-2 radius-ui bg-warning-container color-on-warning-container">5</div>
      <div class="snap-start snap-always shrink-none w-full h-d8 p-2 radius-ui bg-error-container color-on-error-container">6</div>
      <div class="snap-start snap-always shrink-none w-full h-d8 p-2 radius-ui bg-primary-container color-on-primary-container">7</div>
      <div class="snap-start snap-always shrink-none w-full 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-always</code>
  </div>
</div>

Классы

Класс	CSS	Значения
`snap-normal`	`scroll-snap-stop: normal`	—
`snap-always`	`scroll-snap-stop: always`	—

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

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

Применение

Выбор

Класс	Быстрая прокрутка
`snap-normal`	может проскочить элемент — поведение по умолчанию
`snap-always`	останавливается на каждом элементе

Класс ставят на элементы вместе с классом выравнивания:

HTML

<div class="flex overflow-auto snap-x snap-mandatory">
  <section class="snap-start snap-always shrink-none w-full">Шаг 1</section>
  <section class="snap-start snap-always shrink-none w-full">Шаг 2</section>
</div>

Ограничения

Классы действуют только на элементы с выравниванием привязки внутри контейнера с типом привязки.
Прокрутка колёсиком мыши идёт шагами и обычно не проскакивает элементы; разница видна на тачпаде и сенсорном экране.
snap-always в длинной ленте заставляет листать по одному элементу. Для каталога или галереи оставьте snap-normal.
У семейства нет префиксов ширины экрана и состояния.

Навигация

Главное

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

Содержание