Поля прокрутки

​Основы использования

​Установка поля прокрутки

Используйте утилиты scroll-mt-*, scroll-mr-*, scroll-mb-* и scroll-ml-*, чтобы установить смещение прокрутки вокруг элементов внутри контейнера привязки.

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

<div class="snap-x ...">
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>

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

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

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

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

Используйте утилиты scroll-ms-* и scroll-me-*, чтобы установить scroll-margin-inline-start и scroll-margin-inline-end логические свойства, которые сопоставляются с левой или правой стороной в зависимости от направления текста.

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

Left-to-right

Right-to-left

<div dir="ltr">
  <div class="snap-x ...">
    <div class="scroll-ms-6 snap-start ...">
      <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
    </div>
    <!-- ... -->
  </div>
</div>

<div dir="rtl">
  <div class="snap-x ...">
    <div class="scroll-ms-6 snap-start ...">
      <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
    </div>
    <!-- ... -->
  </div>
</div>

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

​Применяя условно

​Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:scroll-m-0, чтобы применять утилиту scroll-m-0 только при hover.

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

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:scroll-m-0, чтобы применить утилиту scroll-m-0 только на экранах среднего размера и выше.

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

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.

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

​Настройка вашей темы

По умолчанию для шкалы полей прокрутки Tailwind используется шкала интервалов по умолчанию. Вы можете настроить масштаб интервалов, отредактировав theme.spacing или theme.extend.spacing в вашем файле tailwind.config.js.

module.exports = {
  theme: {
    extend: {
      spacing: {
        '96': '24rem',
      }
    }
  }
}

Кроме того, вы можете настроить только масштаб поля прокрутки, отредактировав theme.scrollMargin или theme.extend.scrollMargin в вашем файле tailwind.config.js.

module.exports = {
  theme: {
    extend: {
      scrollMargin: {
        '96': '24rem',
      },
    }
  }
}

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

​Произвольные значения

Если вам нужно использовать одноразовое scroll-margin, которое не имеет смысла включать в вашу тему, используйте квадратные скобки для создания свойства на лету с использованием любого произвольного значения.

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

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.