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>);

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 scroll-mt-<number>scroll-mr-<number>scroll-mb-<number>scroll-ml-<number> 工具(如 scroll-ml-4scroll-mt-6)设置捕捉内项目周围的滚动偏移量容器:

¥Use the scroll-mt-<number>, scroll-mr-<number>, scroll-mb-<number>, and scroll-ml-<number> utilities like scroll-ml-4 and scroll-mt-6 to set the scroll offset around items within a snap container:

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

<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>

使用负值(Using negative values)

¥Using negative values

要使用负滚动边距值,请在类名前加上破折号以将其转换为负值:

¥To use a negative scroll margin value, prefix the class name with a dash to convert it to a negative value:

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

使用逻辑属性(Using logical properties)

¥Using logical properties

使用 scroll-ms-<number>scroll-me-<number> 工具设置 scroll-margin-inline-startscroll-margin-inline-end 逻辑属性,它们根据文本方向映射到左侧或右侧:

¥Use the scroll-ms-<number> and scroll-me-<number> utilities to set the scroll-margin-inline-start and scroll-margin-inline-end logical properties, which map to either the left or right side based on the text direction:

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

Left-to-right

Right-to-left

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

¥For more control, you can also use the LTR and RTL modifiers to conditionally apply specific styles depending on the current text direction.

使用自定义值(Using a custom value)

¥Using a custom value

使用工具例如 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() 函数。

响应式设计(Responsive design)

¥Responsive design

scroll-margin 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具:

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

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

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;
}

主题变量文档中了解有关自定义间距比例的更多信息。

TailwindCSS v4.0 中文网 - 粤ICP备13048890号