scroll-padding

Ejemplos

Ejemplo básico

Usa las utilidades scroll-pt-<number>, scroll-pr-<number>, scroll-pb-<number> y scroll-pl-<number> como scroll-pl-4 y scroll-pt-6 para establecer el desplazamiento del padding de un elemento dentro de un contenedor snap:

Desplázate en la cuadrícula de imágenes para ver el comportamiento esperado

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

Usar propiedades lógicas

Usa las utilidades scroll-ps-<number> y scroll-pe-<number> para establecer las propiedades lógicas scroll-padding-inline-start y scroll-padding-inline-end, que se asignan al lado izquierdo o derecho según la dirección del texto:

Desplázate en la cuadrícula de imágenes para ver el comportamiento esperado

De izquierda a derecha

De derecha a izquierda

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

Usar valores negativos

Para usar un valor negativo de scroll padding, prefija el nombre de la clase con un guion para convertirlo en un valor negativo:

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

Usar un valor personalizado

Usa utilidades como scroll-pl-[<value>] y scroll-pe-[<value>] para establecer el scroll padding basado en un valor completamente personalizado:

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

Para variables CSS, también puedes usar la sintaxis scroll-pl-(<custom-property>) :

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

Esto es solo un atajo para scroll-pl-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Diseño Responsive

Prefija una utilidad scroll-padding con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

Aprende más sobre el uso de variantes en la documentación de variantes.

Personalizar tu tema

Las utilidades scroll-p-<number>,scroll-px-<number>,scroll-py-<number>,scroll-ps-<number>,scroll-pe-<number>,scroll-pt-<number>,scroll-pr-<number>,scroll-pb-<number>, y scroll-pl-<number> son impulsadas por la variable de tema --spacing, la cual puede ser personalizada en tu propio tema:

@theme {
  --spacing: 1px; 
}

Aprende más sobre la personalización de la escala de espaciado en la documentación de variables de tema.