1. Interactividad
  2. scrollbar-gutter

Interactividad

scrollbar-gutter

Utilidades para controlar el espacio del canal (gutter) reservado para la barra de desplazamiento de un elemento.

ClaseEstilos
scrollbar-gutter-auto
scrollbar-gutter: auto;
scrollbar-gutter-stable
scrollbar-gutter: stable;
scrollbar-gutter-both
scrollbar-gutter: stable both-edges;

Ejemplos

Reservar espacio para la barra de desplazamiento

Utiliza la utilidad scrollbar-gutter-stable para reservar espacio para la barra de desplazamiento incluso cuando un elemento no esté desbordado:

scrollbar-gutter-auto

¡Hola a todos! Es casi 2027 y todavía no sabemos si hay extraterrestres viviendo entre nosotros, ¿o sí? Tal vez la persona que escribe esto sea un extraterrestre. Nunca lo sabrás.

scrollbar-gutter-stable

¡Hola a todos! Es casi 2027 y todavía no sabemos si hay extraterrestres viviendo entre nosotros, ¿o sí? Tal vez la persona que escribe esto sea un extraterrestre. Nunca lo sabrás.

<div class="overflow-auto scrollbar-gutter-stable ...">  <!-- ... --></div>

Reservar espacio en ambos lados

Utiliza la utilidad scrollbar-gutter-both para reservar un espacio de canal coincidente en ambos lados del elemento:

<div class="overflow-auto scrollbar-gutter-both ...">  <!-- ... --></div>

Uso del canal predeterminado

Utiliza la utilidad scrollbar-gutter-auto para reservar espacio de canal únicamente cuando el navegador mostraría normalmente una barra de desplazamiento:

<div class="overflow-auto scrollbar-gutter-auto ...">  <!-- ... --></div>

Diseño responsivo

Antepone a la utilidad scrollbar-gutter 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="scrollbar-gutter-auto md:scrollbar-gutter-stable ...">  <!-- ... --></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