scroll-padding

用于控制元素在吸附容器中滚动偏移的工具类。

快速参考

类	属性
scroll-p-<number>	scroll-padding: calc(var(--spacing) * <number>);
scroll-p-px	scroll-padding: 1px;
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-px	scroll-padding-inline: 1px;
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-px	scroll-padding-block: 1px;
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-px	scroll-padding-inline-start: 1px;
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-px	scroll-padding-inline-end: 1px;
scroll-pe-(<custom-property>)	scroll-padding-inline-end: var(<custom-property>);
scroll-pe-[<value>]	scroll-padding-inline-end: <value>;
scroll-pbs-<number>	scroll-padding-block-start: calc(var(--spacing) * <number>);
scroll-pbs-px	scroll-padding-block-start: 1px;
scroll-pbs-(<custom-property>)	scroll-padding-block-start: var(<custom-property>);
scroll-pbs-[<value>]	scroll-padding-block-start: <value>;
scroll-pbe-<number>	scroll-padding-block-end: calc(var(--spacing) * <number>);
scroll-pbe-px	scroll-padding-block-end: 1px;
scroll-pbe-(<custom-property>)	scroll-padding-block-end: var(<custom-property>);
scroll-pbe-[<value>]	scroll-padding-block-end: <value>;
scroll-pt-<number>	scroll-padding-top: calc(var(--spacing) * <number>);
scroll-pt-px	scroll-padding-top: 1px;
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-px	scroll-padding-right: 1px;
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-px	scroll-padding-bottom: 1px;
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-px	scroll-padding-left: 1px;
scroll-pl-(<custom-property>)	scroll-padding-left: var(<custom-property>);
scroll-pl-[<value>]	scroll-padding-left: <value>;

示例

基础示例

使用 scroll-pl-4 和 scroll-pt-6 等 scroll-pt-<number>、scroll-pr-<number>、scroll-pb-<number> 和 scroll-pl-<number> 工具类，设置元素在吸附容器中的滚动偏移：

<!-- [!code classes:scroll-pl-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 逻辑属性，它们会根据文本方向映射到左侧或右侧：

Left-to-right

Right-to-left

<!-- [!code word:dir="ltr"] -->
<!-- [!code word:dir="rtl"] -->
<!-- [!code classes:scroll-ps-6] -->
<div dir="ltr">
  <div class="snap-x scroll-ps-6 ...">
    <!-- ... -->
  </div>
</div>

<div dir="rtl">
  <div class="snap-x scroll-ps-6 ...">
    <!-- ... -->
  </div>
</div>

使用 scroll-pbs-<number> 和 scroll-pbe-<number> 工具类来设置 scroll-padding-block-start 和 scroll-padding-block-end 逻辑属性，它们会根据书写模式映射到顶部或底部：

<!-- [!code classes:scroll-pbs-6] -->
<div class="snap-y scroll-pbs-6 ...">
  <!-- ... -->
</div>

使用自定义值

使用 scroll-pl-[<value>] 和 scroll-pe-[<value>] 等工具类，根据完全自定义的值设置滚动内边距：

<div class="scroll-pl-[24rem] ...">
 <!-- ... -->
</div>

对于 CSS 变量，也可以使用 scroll-pl-(<custom-property>) 语法：

<div class="scroll-pl-(--my-scroll-padding) ...">
 <!-- ... -->
</div>

这只是 scroll-pl-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。

响应式设计

使用 md: 等断点变体为 scroll-padding 工具类添加前缀，使其仅在中等及以上屏幕尺寸生效：

<div class="scroll-p-8 md:scroll-p-0 ...">
 <!-- ... -->
</div>

在 变体文档 中了解如何使用变体。

自定义主题

scroll-p-<number>、scroll-px-<number>、scroll-py-<number>、scroll-ps-<number>、scroll-pe-<number>、scroll-pbs-<number>、scroll-pbe-<number>、scroll-pt-<number>、scroll-pr-<number>、scroll-pb-<number> 和 scroll-pl-<number> 工具类由 --spacing 主题变量驱动，你可以在自己的主题中自定义该变量：

@theme {
  --spacing: 1px;
}

在 主题变量文档 中了解如何自定义间距比例。