互动性
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>; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 scroll-mt-<number>
、scroll-mr-<number>
、scroll-mb-<number>
和 scroll-ml-<number>
工具(如 scroll-ml-4
和 scroll-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-start
和 scroll-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; }
在主题变量文档中了解有关自定义间距比例的更多信息。