scroll-padding

快速参考

示例

基本示例

使用 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 逻辑属性。这些属性会根据文本方向映射到左侧或右侧：

在图片网格中滚动以查看预期行为

Left-to-right

Right-to-left

<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>

使用自定义值

使用 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() 函数。

响应式设计

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

<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-pt-<number>、scroll-pr-<number>、scroll-pb-<number> 和 scroll-pl-<number> 等工具类由 --spacing 主题变量驱动，该变量可以在你自己的主题中进行自定义：

@theme {
  --spacing: 1px; 
}

在 主题变量文档 中了解更多关于自定义间距比例的信息。