1. Interactividad
  2. scroll-snap-stop

Interactividad

scroll-snap-stop

Utilidades para controlar si puedes omitir o pasar de largo posibles posiciones de ajuste de scroll.

ClaseEstilos
snap-normal
scroll-snap-stop: normal;
snap-always
scroll-snap-stop: always;

Ejemplos

Forzar paradas en posiciones de ajuste

Utiliza la utilidad snap-always junto con la utilidad snap-mandatory para obligar a un contenedor snap a detenerse siempre en un elemento antes de que el usuario pueda continuar desplazándose al siguiente elemento:

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

punto de ajuste
<div class="snap-x snap-mandatory ...">  <div class="snap-center snap-always ...">    <img src="/img/vacation-01.jpg" />  </div>  <div class="snap-center snap-always ...">    <img src="/img/vacation-02.jpg" />  </div>  <div class="snap-center snap-always ...">    <img src="/img/vacation-03.jpg" />  </div>  <div class="snap-center snap-always ...">    <img src="/img/vacation-04.jpg" />  </div>  <div class="snap-center snap-always ...">    <img src="/img/vacation-05.jpg" />  </div>  <div class="snap-center snap-always ...">    <img src="/img/vacation-06.jpg" />  </div></div>

Omitir paradas en posiciones de ajuste

Utiliza la utilidad snap-normal para permitir que un contenedor snap omita posibles posiciones de ajuste de scroll:

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

punto de ajuste
<div class="snap-x ...">  <div class="snap-center snap-normal ...">    <img src="/img/vacation-01.jpg" />  </div>  <div class="snap-center snap-normal ...">    <img src="/img/vacation-02.jpg" />  </div>  <div class="snap-center snap-normal ...">    <img src="/img/vacation-03.jpg" />  </div>  <div class="snap-center snap-normal ...">    <img src="/img/vacation-04.jpg" />  </div>  <div class="snap-center snap-normal ...">    <img src="/img/vacation-05.jpg" />  </div>  <div class="snap-center snap-normal ...">    <img src="/img/vacation-06.jpg" />  </div></div>

Diseño responsivo

Antepone a la utilidad scroll-snap-stop 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="snap-always md:snap-normal ...">  <!-- ... --></div>

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

Copyright © 2026 Tailwind Labs Inc.·Política de marcas registradas