scroll-margin

Ejemplos

Ejemplo básico

Utiliza utilidades scroll-mt-<number>, scroll-mr-<number>, scroll-mb-<number> y scroll-ml-<number> como scroll-ml-4 y scroll-mt-6 para establecer el desplazamiento de scroll alrededor de los elementos dentro de un contenedor snap:

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

<div class="snap-x ...">  <div class="snap-start scroll-ml-6 ...">    <img src="/img/vacation-01.jpg"/>  </div>  <div class="snap-start scroll-ml-6 ...">    <img src="/img/vacation-02.jpg"/>  </div>  <div class="snap-start scroll-ml-6 ...">    <img src="/img/vacation-03.jpg"/>  </div>  <div class="snap-start scroll-ml-6 ...">    <img src="/img/vacation-04.jpg"/>  </div>  <div class="snap-start scroll-ml-6 ...">    <img src="/img/vacation-05.jpg"/>  </div></div>

Uso de valores negativos

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

<div class="snap-start -scroll-ml-6 ...">  <!-- ... --></div>

Uso de propiedades lógicas

Utiliza las utilidades scroll-ms-<number> y scroll-me-<number> para establecer las propiedades lógicas scroll-margin-inline-start y scroll-margin-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 ...">    <div class="snap-start scroll-ms-6 ...">      <img src="/img/vacation-01.jpg"/>    </div>    <!-- ... -->  </div></div><div dir="rtl">  <div class="snap-x ...">    <div class="snap-start scroll-ms-6 ...">      <img src="/img/vacation-01.jpg"/>    </div>    <!-- ... -->  </div></div>

Para obtener más control, también puedes utilizar los modificadores LTR y RTL para aplicar estilos específicos de forma condicional según la dirección actual del texto.

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

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

Uso de un valor personalizado

Usa utilidades como scroll-ml-[<value>] y scroll-me-[<value>] para establecer el/la scroll margin basándose en un valor completamente personalizado:

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

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

<div class="scroll-ml-(--my-scroll-margin) ...">  <!-- ... --></div>

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

Diseño responsivo

Antepone a la utilidad scroll-margin 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-m-8 md:scroll-m-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-m-<number>,scroll-mx-<number>,scroll-my-<number>,scroll-ms-<number>,scroll-me-<number>,scroll-mbs-<number>,scroll-mbe-<number>,scroll-mt-<number>,scroll-mr-<number>,scroll-mb-<number>, y scroll-ml-<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.