scroll-padding

示例

基本示例

使用像 scroll-pl-4 和 scroll-pt-6 这样的 scroll-pt-<数字>、scroll-pr-<数字>、scroll-pb-<数字> 和 scroll-pl-<数字> 工具类，来设置一个元素在快照容器内的滚动偏移量。

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

<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-<数字> 和 scroll-pe-<数字> 工具类来设置 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>

使用自定义值

使用类似以下的工具类 scroll-pl-[<值>] 和 scroll-pe-[<值>]来设置滚动内边距基于完全自定义的值

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

对于 CSS 变量，您还可以使用 scroll-pl-(<自定义属性>) 语法

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

这只是 scroll-pl-[var(<自定义属性>)] 的简写，它会自动为您添加 var() 函数。

响应式设计

给一个 scroll-padding 工具类 加上一个断点变体，如 md:，仅在中等 屏幕尺寸及以上应用该工具类。

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

在变体文档中了解有关使用变体的更多信息。

自定义您的主题

scroll-p-<数字>,scroll-px-<数字>,scroll-py-<数字>,scroll-ps-<数字>,scroll-pe-<数字>,scroll-pt-<数字>,scroll-pr-<数字>,scroll-pb-<数字>,scroll-pl-<数字> scroll-p-<数字>、scroll-px-<数字>、scroll-py-<数字>、scroll-ps-<数字>、scroll-pe-<数字>、scroll-pt-<数字>、scroll-pr-<数字>、scroll-pb-<数字>,和 scroll-pl-<数字>工具类由 --spacing 主题变量驱动，该变量可以在您自己的主题中自定义。

@theme {  --spacing: 1px; }

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