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

scroll-snap-align

В SIMAI Framework с помощью модифкаторов можно управлять выравниванием привязки прокрутки элемента.

Классы

Класс Значение
snap-start scroll-snap-align: start;
snap-end scroll-snap-align: end;
snap-center scroll-snap-align: text-center;
snap-align-none scroll-snap-align: none;

Описание

Адаптивный модификатор. Задает выравнивание прокрутки элемента в зависимости от размера области просмотра.

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр.

snap-center

С помощью модификатора snap-center - можно установить привязку элемента к его центру при прокрутке внутри контейнера.

<div class="snap-x ...">
    <div class="snap-center ...">
        <img src="./image.jpg" />
    </div>
    <div class="snap-center ...">
        <img src="./image.jpg" />
    </div>
    <div class="snap-center ...">
        <img src="./image.jpg" />
    </div>
    <div class="snap-center ...">
        <img src="./image.jpg" />
    </div>
    <div class="snap-center ...">
        <img src="./image.jpg" />
    </div>
    <div class="snap-center ...">
        <img src="./image.jpg" />
    </div>
</div>

snap-start

С помощью модификатора snap-start - можно установить привязку элемента к его началу при прокрутке внутри контейнера.

<div class="snap-x ...">
    <div class="snap-start ...">
        <img src="./image.jpg" />
    </div>
    <div class="snap-start ...">
        <img src="./image.jpg" />
    </div>
    <div class="snap-start ...">
        <img src="./image.jpg" />
    </div>
    <div class="snap-start ...">
        <img src="./image.jpg" />
    </div>
    <div class="snap-start ...">
        <img src="./image.jpg" />
    </div>
    <div class="snap-start ...">
        <img src="./image.jpg" />
    </div>
</div>

snap-end

С помощью модификатора snap-end - можно установить привязку элемента к его концу при прокрутке внутри контейнера.

<div class="snap-x ...">
    <div class="snap-end ...">
        <img src="./image.jpg" />
    </div>
    <div class="snap-end ...">
        <img src="./image.jpg" />
    </div>
    <div class="snap-end ...">
        <img src="./image.jpg" />
    </div>
    <div class="snap-end ...">
        <img src="./image.jpg" />
    </div>
    <div class="snap-end ...">
        <img src="./image.jpg" />
    </div>
    <div class="snap-end ...">
        <img src="./image.jpg" />
    </div>
</div>

Изменить статью