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-my-(<custom-property>) | scroll-margin-block: var(<custom-property>); |
scroll-my-[<value>] | scroll-margin-block: <value>; |
scroll-ms-<number> | scroll-margin-inline-start: calc(var(--spacing) * <number>); |
-scroll-ms-<number> | scroll-margin-inline-start: calc(var(--spacing) * -<number>); |
scroll-ms-(<custom-property>) | scroll-margin-inline-start: var(<custom-property>); |
scroll-ms-[<value>] | scroll-margin-inline-start: <value>; |
scroll-me-<number> | scroll-margin-inline-end: calc(var(--spacing) * <number>); |
-scroll-me-<number> | scroll-margin-inline-end: calc(var(--spacing) * -<number>); |
scroll-me-(<custom-property>) | scroll-margin-inline-end: var(<custom-property>); |
scroll-me-[<value>] | scroll-margin-inline-end: <value>; |
scroll-mt-<number> | scroll-margin-top: calc(var(--spacing) * <number>); |
-scroll-mt-<number> | scroll-margin-top: calc(var(--spacing) * -<number>); |
scroll-mt-(<custom-property>) | scroll-margin-top: var(<custom-property>); |
scroll-mt-[<value>] | scroll-margin-top: <value>; |
scroll-mr-<number> | scroll-margin-right: calc(var(--spacing) * <number>); |
-scroll-mr-<number> | scroll-margin-right: calc(var(--spacing) * -<number>); |
scroll-mr-(<custom-property>) | scroll-margin-right: var(<custom-property>); |
scroll-mr-[<value>] | scroll-margin-right: <value>; |
scroll-mb-<number> | scroll-margin-bottom: calc(var(--spacing) * <number>); |
-scroll-mb-<number> | scroll-margin-bottom: calc(var(--spacing) * -<number>); |
scroll-mb-(<custom-property>) | scroll-margin-bottom: var(<custom-property>); |
scroll-mb-[<value>] | scroll-margin-bottom: <value>; |
scroll-ml-<number> | scroll-margin-left: calc(var(--spacing) * <number>); |
-scroll-ml-<number> | scroll-margin-left: calc(var(--spacing) * -<number>); |
scroll-ml-(<custom-property>) | scroll-margin-left: var(<custom-property>); |
scroll-ml-[<value>] | scroll-margin-left: <value>; |
示例
基本示例
使用 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 逻辑属性。这些属性会根据文本方向映射到左侧或右侧：
在图片网格中滚动以查看预期行为
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 修改器 来根据当前的文本方向有条件地应用特定样式。
使用自定义值
使用 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() 函数。
响应式设计
在 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;
}
在 主题变量文档 中了解更多关于自定义间距比例的信息。