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

scroll-snap-stop

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

Классы

Класс Значение
snap-normal scroll-snap-stop: normal;
snap-always scroll-snap-stop: always;

Описание

Адаптивный модификатор. Задает возможность пропуска элемента мимо возможных позиций привязки.

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

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

snap-normal

С помощью модификатора snap-normal - можно разрешить контейнеру пропускать возможные положения привязки прокрутки.

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

snap-always

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

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

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