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

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

从左到右

从右到左

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