La scrollbar-widthpropiedad en CSS controla el ancho o "grosor" de una barra de desplazamiento. scrollbar-widthes parte del borrador de nivel 1 del módulo de barras de desplazamiento del Grupo de trabajo CSS, que todavía es un trabajo en progreso. El consenso al momento de escribir este artículo es que scrollbar-widthes probable que se incluya en futuras versiones de CSS, pero existe un debate sobre si se permitirá un argumento variable o si las opciones se limitarán a valores preestablecidos (más sobre estos más adelante) .
Ajustar el ancho de la barra de desplazamiento es particularmente importante en páginas o interfaces de usuario con espacio limitado, donde recortar solo unos pocos píxeles de la barra de desplazamiento (o eliminarlo por completo) puede dar al contenido suficiente espacio para respirar, sin eliminar la capacidad de desplazamiento.
Por ejemplo, imagine una interfaz de edición de texto donde las necesidades encajen dentro de un contenedor corto y estrecho. En tal situación, la barra de desplazamiento puede ocupar gran parte del espacio disponible:
scrollbar-width: auto;
Con scrollbar-width, podemos establecer el ancho thinpara ahorrar espacio:
.scrollable-element ( scrollbar-width: thin; )
textarea con scrollbar-width: thin;
O podemos configurar el ancho para noneeliminarlo por completo, ahorrando aún más espacio (asumiendo que estamos de acuerdo con la desaparición de la barra de desplazamiento):
.scrollable-element ( scrollbar-width: none; )
textareacon scrollbar-width: none;- ¡y aún puedes desplazarte!
Sintaxis
scrollbar-width: auto | thin | none | ; Valores
scrollbar-width acepta los siguientes valores:
autoes el valor predeterminado y representará las barras de desplazamiento estándar para el agente de usuario.thinle dirá al agente de usuario que use barras de desplazamiento más delgadas, cuando corresponda.noneocultará la barra de desplazamiento por completo, sin afectar la capacidad de desplazamiento del elemento.se está debatiendo, pero (si se agrega) sería un ancho máximo de la barra de desplazamiento.
Ejemplo
Soporte del navegador
Esto es para la personalización general de las barras de desplazamiento. Para obtener la mejor opción para diseñar un navegador cruzado con barra de desplazamiento, consulte aquí.
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 91 * | 87 | 11 | 88 * | TP * |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 * | No | 81 * | 14,0-14,4 * |
Relacionado
scrollbar-gutterscrollbar-colorscrollbar
Recursos
- Borrador del módulo CSSWG Scrollbars
- Colección W3C de casos de uso para la modificación de la barra de desplazamiento
- Futuro de CSS: barras de desplazamiento en dev.to
- Discusión de w3c Github sobre el control del ancho de la barra de desplazamiento