scroll-padding

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 scroll-pt-<number>、scroll-pr-<number>、scroll-pb-<number> 和 scroll-pl-<number> 工具（如 scroll-pl-4 和 scroll-pt-6）设置元素在捕捉容器内的滚动偏移量：

¥Use the scroll-pt-<number>, scroll-pr-<number>, scroll-pb-<number>, and scroll-pl-<number> utilities like scroll-pl-4 and scroll-pt-6 to set the scroll offset of an element within a snap container:

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

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

使用逻辑属性(Using logical properties)

¥Using logical properties

使用 scroll-ps-<number> 和 scroll-pe-<number> 工具设置 scroll-padding-inline-start 和 scroll-padding-inline-end 逻辑属性，它们根据文本方向：

¥Use the scroll-ps-<number> and scroll-pe-<number> utilities to set the scroll-padding-inline-start and scroll-padding-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 scroll-ps-6 ...">
  <!-- ... -->
</div>
</div>
<div dir="rtl">
<div class="snap-x scroll-ps-6 ...">
  <!-- ... -->
</div>
</div>

使用负值(Using negative values)

¥Using negative values

要使用负滚动填充值，请在类名前加上破折号以将其转换为负值：

¥To use a negative scroll padding value, prefix the class name with a dash to convert it to a negative value:

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

使用自定义值(Using a custom value)

¥Using a custom value

使用工具例如 scroll-pl-[<value>] and scroll-pe-[<value>] 根据完全自定义的值设置 scroll padding：

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

响应式设计(Responsive design)

¥Responsive design

在 scroll-padding 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

该 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> 工具由 --spacing 主题变量驱动，可以在你自己的主题中进行自定义：

@theme {
  --spacing: 1px; 
}

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