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