交互性
用于控制捕捉容器中项目周围滚动偏移的实用程序。
类 | 样式 |
---|---|
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-ml-4
和 scroll-mt-6
的 scroll-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-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 修饰符,根据当前文本方向有条件地应用特定样式。
使用类似以下的实用程序 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; }
了解有关自定义间距比例的更多信息,请参阅主题变量文档。