scroll-padding

Ejemplos

Ejemplo básico

Utiliza 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 de scroll 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>

Uso de propiedades lógicas

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

Utiliza las utilidades scroll-pbs-<number> y scroll-pbe-<number> para establecer las propiedades lógicas scroll-padding-block-start y scroll-padding-block-end, que se mapean al lado superior o inferior según el modo de escritura:

<div class="snap-y scroll-pbs-6 ...">  <!-- ... --></div>

Uso de valores negativos

Para usar un valor de scroll padding negativo, antepón un guion al nombre de la clase para convertirlo en un valor negativo:

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

Uso de un valor personalizado

Usa utilidades como scroll-pl-[<value>] y scroll-pe-[<value>] para establecer el/la scroll padding basándose 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 añade la función var() por ti automáticamente.

Diseño responsivo

Antepone a la utilidad scroll-padding el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

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

Obtén más información sobre el uso de variantes en la documentación de variantes.

Personalizar el tema

Las utilidades scroll-p-<number>,scroll-px-<number>,scroll-py-<number>,scroll-ps-<number>,scroll-pe-<number>,scroll-pbs-<number>,scroll-pbe-<number>,scroll-pt-<number>,scroll-pr-<number>,scroll-pb-<number>, y scroll-pl-<number> se basan en la variable de tema --spacing, la cual se puede personalizar en tu propio tema:

@theme {  --spacing: 1px; }

Obtén más información sobre cómo personalizar la escala de espaciado en la documentación de variables de tema.