Тип привязки прокрутки

scroll-snap-type

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

Классы

Класс Значение
snap-none scroll-snap-type: none;
snap-x scroll-snap-type: x var(--sf-scroll-snap-strictness);
snap-y scroll-snap-type: y var(--sf-scroll-snap-strictness);
snap-both scroll-snap-type: both mandatory;
snap-example scroll-snap-type: Array;
snap-mandatory --sf-scroll-snap-strictness: mandatory;
snap-proximity --sf-scroll-snap-strictness: proximity;

Описание

Адаптивный модификатор. Задает строгость применения точки привязки в контейнере.

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

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

snap-x

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

Чтобы привязка прокрутки работала, вам также необходимо установить выравнивание привязки прокрутки для дочерних элементов внутри элемента..

<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-snap-x snap-center ...">
        <img src="./image.jpg" />
    </div>
</div>

snap-mandatory

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

<div class="snap-x snap-mandatory ...">
    <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-snap-x snap-mandatory snap-center ...">
        <img src="./image.jpg" />
    </div>
</div>

snap-proximity

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

<div class="snap-x snap-proximity ...">
    <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-snap-x snap-proximity snap-center ...">
        <img src="./image.jpg" />
    </div>
</div>

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