1. Interactividad
  2. scrollbar-width

Interactividad

scrollbar-width

Utilidades para controlar el ancho de la barra de desplazamiento (scrollbar) de un elemento.

ClaseEstilos
scrollbar-auto
scrollbar-width: auto;
scrollbar-thin
scrollbar-width: thin;
scrollbar-none
scrollbar-width: none;

Ejemplos

Uso del ancho de barra de desplazamiento predeterminado

Utiliza la utilidad scrollbar-auto para usar el ancho de barra de desplazamiento predeterminado del navegador:

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

Uso de una barra de desplazamiento delgada (thin)

Utiliza la utilidad scrollbar-thin para usar una barra de desplazamiento más delgada:

Desplázate verticalmente

Los Archivos Cerúleos ocupan tres plantas estrechas sobre el antiguo observatorio, cada una de ellas repleta de cajones con mapas estelares, notas de expediciones e instrumentos de latón catalogados a mano.

En las mañanas de invierno, el personal desplaza escaleras de mano entre las estanterías mientras la luz pálida atraviesa las ventanas del tejado y se posa sobre las mesas de lectura.

Los visitantes pueden solicitar cualquier objeto de la colección, pero la mayoría viene por los atlas que cartografían líneas de costa que ya no se encuentran en los mapas modernos.

Cada volumen devuelto es inspeccionado, desempolvado y envuelto antes de ser llevado de vuelta a las estanterías para el siguiente investigador.

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

Ocultar las barras de desplazamiento

Utiliza la utilidad scrollbar-none para ocultar las barras de desplazamiento sin dejar de permitir el desplazamiento del elemento:

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

Estas utilidades solo admiten las palabras clave del navegador auto, thin y none.

Diseño responsivo

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