Внешний отступ прокрутки
scroll-margin
В SIMAI Framework с помощью модифкаторов можно управлять смещением прокрутки вокруг элементов в контейнере привязки.
Классы
| Класс | Значение |
|---|---|
scroll-m-0 |
scroll-margin: var(--sf-space--size-0); |
scroll-mt-0 |
scroll-margin-top: var(--sf-space--size-0); |
scroll-mr-0 |
scroll-margin-right: var(--sf-space--size-0); |
scroll-m-bottom-0 |
scroll-margin-bottom: var(--sf-space--size-0); |
scroll-ml-0 |
scroll-margin-left: var(--sf-space--size-0); |
scroll-mx-0 |
scroll-margin-left: var(--sf-space--size-0); |
scroll-my-0 |
scroll-margin-top: var(--sf-space--size-0); |
scroll-m-1 |
scroll-margin: var(--sf-space--size-1); |
scroll-mt-1 |
scroll-margin-top: var(--sf-space--size-1); |
scroll-mr-1 |
scroll-margin-right: var(--sf-space--size-1); |
scroll-m-bottom-1 |
scroll-margin-bottom: var(--sf-space--size-1); |
scroll-ml-1 |
scroll-margin-left: var(--sf-space--size-1); |
scroll-mx-1 |
scroll-margin-left: var(--sf-space--size-1); |
scroll-my-1 |
scroll-margin-top: var(--sf-space--size-1); |
scroll-m-2 |
scroll-margin: var(--sf-space--size-2); |
scroll-mt-2 |
scroll-margin-top: var(--sf-space--size-2); |
scroll-mr-2 |
scroll-margin-right: var(--sf-space--size-2); |
scroll-m-bottom-2 |
scroll-margin-bottom: var(--sf-space--size-2); |
scroll-ml-2 |
scroll-margin-left: var(--sf-space--size-2); |
scroll-mx-2 |
scroll-margin-left: var(--sf-space--size-2); |
scroll-my-2 |
scroll-margin-top: var(--sf-space--size-2); |
scroll-m-3 |
scroll-margin: var(--sf-space--size-3); |
scroll-mt-3 |
scroll-margin-top: var(--sf-space--size-3); |
scroll-mr-3 |
scroll-margin-right: var(--sf-space--size-3); |
scroll-m-bottom-3 |
scroll-margin-bottom: var(--sf-space--size-3); |
scroll-ml-3 |
scroll-margin-left: var(--sf-space--size-3); |
scroll-mx-3 |
scroll-margin-left: var(--sf-space--size-3); |
scroll-my-3 |
scroll-margin-top: var(--sf-space--size-3); |
scroll-m-4 |
scroll-margin: var(--sf-space--size-4); |
scroll-mt-4 |
scroll-margin-top: var(--sf-space--size-4); |
scroll-mr-4 |
scroll-margin-right: var(--sf-space--size-4); |
scroll-m-bottom-4 |
scroll-margin-bottom: var(--sf-space--size-4); |
scroll-ml-4 |
scroll-margin-left: var(--sf-space--size-4); |
scroll-mx-4 |
scroll-margin-left: var(--sf-space--size-4); |
scroll-my-4 |
scroll-margin-top: var(--sf-space--size-4); |
scroll-m-5 |
scroll-margin: var(--sf-space--size-5); |
scroll-mt-5 |
scroll-margin-top: var(--sf-space--size-5); |
scroll-mr-5 |
scroll-margin-right: var(--sf-space--size-5); |
scroll-m-bottom-5 |
scroll-margin-bottom: var(--sf-space--size-5); |
scroll-ml-5 |
scroll-margin-left: var(--sf-space--size-5); |
scroll-mx-5 |
scroll-margin-left: var(--sf-space--size-5); |
scroll-my-5 |
scroll-margin-top: var(--sf-space--size-5); |
scroll-m-6 |
scroll-margin: var(--sf-space--size-6); |
scroll-mt-6 |
scroll-margin-top: var(--sf-space--size-6); |
scroll-mr-6 |
scroll-margin-right: var(--sf-space--size-6); |
scroll-m-bottom-6 |
scroll-margin-bottom: var(--sf-space--size-6); |
scroll-ml-6 |
scroll-margin-left: var(--sf-space--size-6); |
scroll-mx-6 |
scroll-margin-left: var(--sf-space--size-6); |
scroll-my-6 |
scroll-margin-top: var(--sf-space--size-6); |
scroll-m-7 |
scroll-margin: var(--sf-space--size-7); |
scroll-mt-7 |
scroll-margin-top: var(--sf-space--size-7); |
scroll-mr-7 |
scroll-margin-right: var(--sf-space--size-7); |
scroll-m-bottom-7 |
scroll-margin-bottom: var(--sf-space--size-7); |
scroll-ml-7 |
scroll-margin-left: var(--sf-space--size-7); |
scroll-mx-7 |
scroll-margin-left: var(--sf-space--size-7); |
scroll-my-7 |
scroll-margin-top: var(--sf-space--size-7); |
scroll-m-8 |
scroll-margin: var(--sf-space--size-8); |
scroll-mt-8 |
scroll-margin-top: var(--sf-space--size-8); |
scroll-mr-8 |
scroll-margin-right: var(--sf-space--size-8); |
scroll-m-bottom-8 |
scroll-margin-bottom: var(--sf-space--size-8); |
scroll-ml-8 |
scroll-margin-left: var(--sf-space--size-8); |
scroll-mx-8 |
scroll-margin-left: var(--sf-space--size-8); |
scroll-my-8 |
scroll-margin-top: var(--sf-space--size-8); |
scroll-m-9 |
scroll-margin: var(--sf-space--size-9); |
scroll-mt-9 |
scroll-margin-top: var(--sf-space--size-9); |
scroll-mr-9 |
scroll-margin-right: var(--sf-space--size-9); |
scroll-m-bottom-9 |
scroll-margin-bottom: var(--sf-space--size-9); |
scroll-ml-9 |
scroll-margin-left: var(--sf-space--size-9); |
scroll-mx-9 |
scroll-margin-left: var(--sf-space--size-9); |
scroll-my-9 |
scroll-margin-top: var(--sf-space--size-9); |
Описание
Адаптивный модификатор. Задает смещение прокрутки вокруг элементов в контейнере в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр.
Пример
<div class="snap-x ...">
<div class="scroll-m-left-3 snap-start ...">
<img src="./picture.svg" />
</div>
<div class="scroll-m-left-3 snap-start ...">
<img src="./picture.svg" />
</div>
<div class="scroll-m-left-3 snap-start ...">
<img src="./picture.svg" />
</div>
<div class="scroll-m-left-3 snap-start ...">
<img src="./picture.svg" />
</div>
<div class="scroll-m-left-3 snap-start ...">
<img src="./picture.svg" />
</div>
</div>