交互
scroll-padding
用于控制元素在捕捉容器内的滚动偏移的工具类。
| Class | Styles |
|---|---|
scroll-p-<number> | scroll-padding: calc(var(--spacing) * <number>); |
-scroll-p-<number> | scroll-padding: calc(var(--spacing) * -<number>); |
scroll-p-(<custom-property>) | scroll-padding: var(<custom-property>); |
scroll-p-[<value>] | scroll-padding: <value>; |
scroll-px-<number> | scroll-padding-inline: calc(var(--spacing) * <number>); |
-scroll-px-<number> | scroll-padding-inline: calc(var(--spacing) * -<number>); |
scroll-px-(<custom-property>) | scroll-padding-inline: var(<custom-property>); |
scroll-px-[<value>] | scroll-padding-inline: <value>; |
scroll-py-<number> | scroll-padding-block: calc(var(--spacing) * <number>); |
-scroll-py-<number> | scroll-padding-block: calc(var(--spacing) * -<number>); |
scroll-py-(<custom-property>) | scroll-padding-block: var(<custom-property>); |
scroll-py-[<value>] | scroll-padding-block: <value>; |
scroll-ps-<number> | scroll-padding-inline-start: calc(var(--spacing) * <number>); |
-scroll-ps-<number> | scroll-padding-inline-start: calc(var(--spacing) * -<number>); |
scroll-ps-(<custom-property>) | scroll-padding-inline-start: var(<custom-property>); |
scroll-ps-[<value>] | scroll-padding-inline-start: <value>; |
scroll-pe-<number> | scroll-padding-inline-end: calc(var(--spacing) * <number>); |
-scroll-pe-<number> | scroll-padding-inline-end: calc(var(--spacing) * -<number>); |
scroll-pe-(<custom-property>) | scroll-padding-inline-end: var(<custom-property>); |
scroll-pe-[<value>] | scroll-padding-inline-end: <value>; |
scroll-pt-<number> | scroll-padding-top: calc(var(--spacing) * <number>); |
-scroll-pt-<number> | scroll-padding-top: calc(var(--spacing) * -<number>); |
scroll-pt-(<custom-property>) | scroll-padding-top: var(<custom-property>); |
scroll-pt-[<value>] | scroll-padding-top: <value>; |
scroll-pr-<number> | scroll-padding-right: calc(var(--spacing) * <number>); |
-scroll-pr-<number> | scroll-padding-right: calc(var(--spacing) * -<number>); |
scroll-pr-(<custom-property>) | scroll-padding-right: var(<custom-property>); |
scroll-pr-[<value>] | scroll-padding-right: <value>; |
scroll-pb-<number> | scroll-padding-bottom: calc(var(--spacing) * <number>); |
-scroll-pb-<number> | scroll-padding-bottom: calc(var(--spacing) * -<number>); |
scroll-pb-(<custom-property>) | scroll-padding-bottom: var(<custom-property>); |
scroll-pb-[<value>] | scroll-padding-bottom: <value>; |
scroll-pl-<number> | scroll-padding-left: calc(var(--spacing) * <number>); |
-scroll-pl-<number> | scroll-padding-left: calc(var(--spacing) * -<number>); |
scroll-pl-(<custom-property>) | scroll-padding-left: var(<custom-property>); |
scroll-pl-[<value>] | scroll-padding-left: <value>; |
示例
基本示例
使用 scroll-pt-<number>、scroll-pr-<number>、scroll-pb-<number> 和 scroll-pl-<number> 工具类，例如 scroll-pl-4 和 scroll-pt-6，在捕捉容器内设置元素的滚动偏移：
在图像网格中滚动以查看预期效果
<div class="snap-x scroll-pl-6 ..."> <div class="snap-start ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-05.jpg" /> </div></div>使用逻辑属性
使用 scroll-ps-<number> 和 scroll-pe-<number> 工具类设置 scroll-padding-inline-start 和 scroll-padding-inline-end 逻辑属性，这取决于文本方向映射到左侧或右侧：
在图像网格中滚动以查看预期效果
从左到右
从右到左
<div dir="ltr"> <div class="snap-x scroll-ps-6 ..."> <!-- ... --> </div></div><div dir="rtl"> <div class="snap-x scroll-ps-6 ..."> <!-- ... --> </div></div>使用负值
要使用负的滚动内边距值，请用短横线作为前缀将类名转换为负值：
<div class="-scroll-ps-6 snap-x ..."> <!-- ... --></div>使用自定义值
Use utilities like scroll-pl-[<value>] and scroll-pe-[<value>] to set the 滚动内边距 based on a completely custom value:
<div class="scroll-pl-[24rem] ..."> <!-- ... --></div>For CSS variables, you can also use the scroll-pl-(<custom-property>) syntax:
<div class="scroll-pl-(--my-scroll-padding) ..."> <!-- ... --></div>This is just a shorthand for scroll-pl-[var(<custom-property>)] that adds the var() function for you automatically.
响应式设计
Prefix a scroll-padding utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="scroll-p-8 md:scroll-p-0 ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.
自定义主题
The scroll-p-<number>,scroll-px-<number>,scroll-py-<number>,scroll-ps-<number>,scroll-pe-<number>,scroll-pt-<number>,scroll-pr-<number>,scroll-pb-<number>, and scroll-pl-<number> utilities are driven by the --spacing theme variable, which can be customized in your own theme:
@theme { --spacing: 1px; }Learn more about customizing the spacing scale in the theme variable documentation.