scroll-margin

Ejemplos

Ejemplo básico

Usa las 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 del margen 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>

Usar valores negativos

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

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

Usar propiedades lógicas

Usa 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 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 ...">
    <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 mayor control, también puedes usar los modificadores LTR y RTL para aplicar estilos específicos condicionalmente según la dirección actual del texto.

Usar un valor personalizado

Usa utilidades como scroll-ml-[<value>] y scroll-me-[<value>] para establecer el scroll margin basado 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 agrega la función var() por ti automáticamente.

Diseño Responsive

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

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

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

Personalizar tu tema

Las utilidades scroll-m-<number>,scroll-mx-<number>,scroll-my-<number>,scroll-ms-<number>,scroll-me-<number>,scroll-mt-<number>,scroll-mr-<number>,scroll-mb-<number>, y scroll-ml-<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.