Выравнивание привязки прокрутки (scroll-snap-align)link

https://dev.ru.simai.io/ru/ui/utility/scroll/scroll-snap-align.php

Модификаторы из пакета scroll-snap-align позволяют управлять тем, как элементы выравниваются при остановке прокрутки внутри контейнера с привязкой прокрутки.

Краткое описаниеlink

При использовании привязки прокрутки (scroll-snap), элементы могут "прилипать" к определенным позициям при завершении прокрутки. С помощью данных модификаторов вы можете указать, как элемент будет выравниваться (по началу, концу или центру).

Классы и их значенияlink

Класс	Значение
.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;

Описаниеlink

Модификаторы управляют тем, где будет находиться элемент после того, как пользователь закончит прокручивать область. Например, snap-center расположит элемент по центру области просмотра, snap-start выровняет элемент по началу (левому или верхнему краю), а snap-end — по концу (правому или нижнему краю).

Синтаксисlink

Использование модификаторов: {snap-модификатор}

Например:

<div class="snap-x overflow-auto w-full ...">
  <div class="snap-center inline-block w-... bg-surface-1 p-2 ...">Элемент 1</div>
  <div class="snap-center inline-block w-... bg-surface-1 p-2 ...">Элемент 2</div>
  <div class="snap-center inline-block w-... bg-surface-1 p-2 ...">Элемент 3</div>
</div>

Пример использованияlink

<div class="snap-x overflow-auto w-full ...">
  <div class="snap-start inline-block bg-surface-1 p-2 ..."><img src="./image.jpg" alt="Изображение 1"></div>
  <div class="snap-center inline-block bg-surface-1 p-2 ..."><img src="./image.jpg" alt="Изображение 2"></div>
  <div class="snap-end inline-block bg-surface-1 p-2 ..."><img src="./image.jpg" alt="Изображение 3"></div>
</div>