scroll-margin

Примеры

Базовый пример

Используйте утилиты scroll-mt-<number>, scroll-mr-<number>, scroll-mb-<number> и scroll-ml-<number> как scroll-ml-4 и scroll-mt-6 для установки отступа прокрутки вокруг элементов в контейнере с привязкой:

Прокрутите в сетке изображений, чтобы увидеть ожидаемое поведение

<div class="snap-x ...">  <div class="snap-start scroll-ml-6 ...">    <img src="/img/vacation-01.jpg"/>  </div>  <div class="snap-start scroll-ml-6 ...">    <img src="/img/vacation-02.jpg"/>  </div>  <div class="snap-start scroll-ml-6 ...">    <img src="/img/vacation-03.jpg"/>  </div>  <div class="snap-start scroll-ml-6 ...">    <img src="/img/vacation-04.jpg"/>  </div>  <div class="snap-start scroll-ml-6 ...">    <img src="/img/vacation-05.jpg"/>  </div></div>

Использование отрицательных значений

Для использования отрицательного значения отступа прокрутки добавьте дефис перед именем класса, чтобы преобразовать его в отрицательное значение:

<div class="snap-start -scroll-ml-6 ...">  <!-- ... --></div>

Использование логических свойств

Используйте утилиты scroll-ms-<number> и scroll-me-<number> для установки логических свойств scroll-margin-inline-start и scroll-margin-inline-end, которые отображаются на левую или правую сторону в зависимости от направления текста:

Прокрутите в сетке изображений, чтобы увидеть ожидаемое поведение

Слева направо

Справа налево

<div dir="ltr">  <div class="snap-x ...">    <div class="snap-start scroll-ms-6 ...">      <img src="/img/vacation-01.jpg"/>    </div>    <!-- ... -->  </div></div><div dir="rtl">  <div class="snap-x ...">    <div class="snap-start scroll-ms-6 ...">      <img src="/img/vacation-01.jpg"/>    </div>    <!-- ... -->  </div></div>

Для большего контроля вы также можете использовать модификаторы LTR и RTL для условного применения конкретных стилей в зависимости от текущего направления текста.

Использование пользовательского значения

Используйте такие утилиты, как scroll-ml-[<value>] and scroll-me-[<value>], чтобы задать scroll margin на основе полностью пользовательского значения:

<div class="scroll-ml-[24rem] ...">  <!-- ... --></div>

Для переменных CSS вы также можете использовать синтаксис: scroll-ml-(<custom-property>)

<div class="scroll-ml-(--my-scroll-margin) ...">  <!-- ... --></div>

Это просто сокращение, scroll-ml-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a scroll-margin утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="scroll-m-8 md:scroll-m-0 ...">  <!-- ... --></div>

Подробнее об использовании вариантов читайте в документации по вариантам.

Кастомизация вашей темы

Утилиты scroll-m-<number>,scroll-mx-<number>,scroll-my-<number>,scroll-ms-<number>,scroll-me-<number>,scroll-mt-<number>,scroll-mr-<number>,scroll-mb-<number>, and scroll-ml-<number> управляются переменной темы --spacing, которую можно настроить в вашей собственной теме:

@theme {  --spacing: 1px; }

Подробнее о настройке шкалы интервалов читайте в документации по переменным темы.