1. 交互性
  2. scroll-margin

交互性

scroll-margin

用于控制捕捉容器中项目周围滚动偏移的实用程序。

样式
scroll-m-<number>
scroll-margin: calc(var(--spacing) * <number>);
-scroll-m-<number>
scroll-margin: calc(var(--spacing) * -<number>);
scroll-m-(<custom-property>)
scroll-margin: var(<custom-property>);
scroll-m-[<value>]
scroll-margin: <value>;
scroll-mx-<number>
scroll-margin-inline: calc(var(--spacing) * <number>);
-scroll-mx-<number>
scroll-margin-inline: calc(var(--spacing) * -<number>);
scroll-mx-(<custom-property>)
scroll-margin-inline: var(<custom-property>);
scroll-mx-[<value>]
scroll-margin-inline: <value>;
scroll-my-<number>
scroll-margin-block: calc(var(--spacing) * <number>);
-scroll-my-<number>
scroll-margin-block: calc(var(--spacing) * -<number>);

示例

基本示例

使用类似 scroll-ml-4scroll-mt-6scroll-mt-<number>scroll-mr-<number>scroll-mb-<number>scroll-ml-<number> 实用程序来设置捕捉容器内项目周围的滚动偏移量

在图像网格中滚动以查看预期行为

<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-startscroll-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>]scroll-me-[<value>]来设置滚动边距基于完全自定义的值

<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: 这样的断点变体,仅在中等 屏幕尺寸及以上应用该实用程序

<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>scroll-ml-<number>实用程序由 --spacing 主题变量驱动,该变量可以在您自己的主题中自定义

@theme {
--spacing: 1px;
}

了解有关自定义间距比例的更多信息,请参阅主题变量文档

版权所有 © 2025 Tailwind Labs Inc.·商标政策