scroll-margin
用于控制吸附容器中项目周围滚动偏移的工具类。
快速参考
| 类 | 属性 |
|---|---|
scroll-m-<number> | scroll-margin: calc(var(--spacing) * <number>); |
-scroll-m-<number> | scroll-margin: calc(var(--spacing) * -<number>); |
scroll-m-px | scroll-margin: 1px; |
-scroll-m-px | scroll-margin: -1px; |
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-px | scroll-margin-inline: 1px; |
-scroll-mx-px | scroll-margin-inline: -1px; |
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-px | scroll-margin-block: 1px; |
-scroll-my-px | scroll-margin-block: -1px; |
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-px | scroll-margin-inline-start: 1px; |
-scroll-ms-px | scroll-margin-inline-start: -1px; |
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-px | scroll-margin-inline-end: 1px; |
-scroll-me-px | scroll-margin-inline-end: -1px; |
scroll-me-(<custom-property>) | scroll-margin-inline-end: var(<custom-property>); |
scroll-me-[<value>] | scroll-margin-inline-end: <value>; |
scroll-mbs-<number> | scroll-margin-block-start: calc(var(--spacing) * <number>); |
-scroll-mbs-<number> | scroll-margin-block-start: calc(var(--spacing) * -<number>); |
scroll-mbs-px | scroll-margin-block-start: 1px; |
-scroll-mbs-px | scroll-margin-block-start: -1px; |
scroll-mbs-(<custom-property>) | scroll-margin-block-start: var(<custom-property>); |
scroll-mbs-[<value>] | scroll-margin-block-start: <value>; |
scroll-mbe-<number> | scroll-margin-block-end: calc(var(--spacing) * <number>); |
-scroll-mbe-<number> | scroll-margin-block-end: calc(var(--spacing) * -<number>); |
scroll-mbe-px | scroll-margin-block-end: 1px; |
-scroll-mbe-px | scroll-margin-block-end: -1px; |
scroll-mbe-(<custom-property>) | scroll-margin-block-end: var(<custom-property>); |
scroll-mbe-[<value>] | scroll-margin-block-end: <value>; |
scroll-mt-<number> | scroll-margin-top: calc(var(--spacing) * <number>); |
-scroll-mt-<number> | scroll-margin-top: calc(var(--spacing) * -<number>); |
scroll-mt-px | scroll-margin-top: 1px; |
-scroll-mt-px | scroll-margin-top: -1px; |
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-px | scroll-margin-right: 1px; |
-scroll-mr-px | scroll-margin-right: -1px; |
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-px | scroll-margin-bottom: 1px; |
-scroll-mb-px | scroll-margin-bottom: -1px; |
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-px | scroll-margin-left: 1px; |
-scroll-ml-px | scroll-margin-left: -1px; |
scroll-ml-(<custom-property>) | scroll-margin-left: var(<custom-property>); |
scroll-ml-[<value>] | scroll-margin-left: <value>; |
示例
基础示例
使用 scroll-ml-4 和 scroll-mt-6 等 scroll-mt-<number>、scroll-mr-<number>、scroll-mb-<number> 和 scroll-ml-<number> 工具类，设置吸附容器中项目周围的滚动偏移：
html
<!-- [!code classes:scroll-ml-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>使用负值
要使用负的滚动外边距值，在类名前面加上短横线即可转换为负值：
html
<!-- [!code classes:-scroll-ml-6] -->
<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
html
<!-- [!code classes:scroll-ms-6] -->
<!-- [!code word:dir="ltr"] -->
<!-- [!code word:dir="rtl"] -->
<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-mbs-<number> 和 scroll-mbe-<number> 工具类来设置 scroll-margin-block-start 和 scroll-margin-block-end 逻辑属性，它们会根据书写模式映射到顶部或底部：
html
<!-- [!code classes:scroll-mbs-6] -->
<div class="snap-y ...">
<div class="snap-start scroll-mbs-6 ...">
<!-- ... -->
</div>
</div>使用自定义值
使用 scroll-ml-[<value>] 和 scroll-me-[<value>] 等工具类，根据完全自定义的值设置滚动外边距：
html
<div class="scroll-ml-[24rem] ...">
<!-- ... -->
</div>对于 CSS 变量，也可以使用 scroll-ml-(<custom-property>) 语法：
html
<div class="scroll-ml-(--my-scroll-margin) ...">
<!-- ... -->
</div>这只是 scroll-ml-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。
响应式设计
使用 md: 等断点变体为 scroll-margin 工具类添加前缀，使其仅在中等及以上屏幕尺寸生效：
html
<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-mbs-<number>、scroll-mbe-<number>、scroll-mt-<number>、scroll-mr-<number>、scroll-mb-<number> 和 scroll-ml-<number> 工具类由 --spacing 主题变量驱动，你可以在自己的主题中自定义该变量：
css
@theme {
--spacing: 1px;
}在 主题变量文档 中了解如何自定义间距比例。