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 修饰符 来根据当前文本方向有条件地应用特定样式。

使用自定义值

Use utilities like scroll-ml-[<value>] and scroll-me-[<value>] to set the 滚动边距 based on a completely custom value:

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

For CSS variables, you can also use the scroll-ml-(<custom-property>) syntax:

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

This is just a shorthand for scroll-ml-[var(<custom-property>)] that adds the var() function for you automatically.

响应式设计

Prefix a scroll-margin utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.

自定义主题

The 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> utilities are driven by the --spacing theme variable, which can be customized in your own theme:

@theme {
  --spacing: 1px; 
}

Learn more about customizing the spacing scale in the theme variable documentation.