Barras de desplazamiento

La propiedad scrollbar-width

La propiedad scrollbar-width nos permite indicar el tamaño de nuestra barra de desplazamiento. Tiene varios valores posibles que podemos utilizar:

Más adelante veremos más formas no estándar de personalizar las barras de desplazamiento, pero las que estamos viendo actualmente son maneras estándar (compatibles con todos los navegadores).

La propiedad scrollbar-gutter

La palabra gutter hace referencia a un «canal», espacio o hueco que se puede configurar a la hora de crear barras de desplazamiento. Esto es especialmente interesante en situaciones donde la barra de desplazamiento aparece o desaparece dependiendo del contenido o la posición de la web, causando que el contenido sea inestable y se desplace o se mueva de forma irregular.

Los valores de esta propiedad son los siguientes:

La última opción, both-edges, realmente es un valor que se puede añadir a las anteriores para indicar esa característica.

Veamos algunos ejemplos:

.element-1 {
  scrollbar-color: deeppink indigo;
  scrollbar-width: thin;
  scrollbar-gutter: auto;
}

.element-2 {
  scrollbar-color: deeppink indigo;
  scrollbar-width: thin;
  scrollbar-gutter: stable both-edges;
}

La propiedad scrollbar-color

Por último, la propiedad scrollbar-color nos permite personalizar el color de la barra de desplazamiento. Dispone de dos parámetros, donde el primero es el color de la barra de desplazamiento y el segundo es el color del fondo de la barra de desplazamiento.

.container {
  scrollbar-color: deeppink black;
  scrollbar-width: auto;
  scrollbar-gutter: stable;
}

Scrollbar con ::-webkit-scrollbar

Comencemos con el pseudoelemento ::-webkit-scrollbar, que nos permite dar estilo a la barra de desplazamiento en conjunto. Antes de comenzar, examina el código de .container y observa que estamos cambiando el tamaño del elemento e indicando un overflow-y: scroll para forzar a que haya barra de desplazamiento en el eje Y (vertical).

Una vez hecho esto, podemos utilizar nuestra pseudoclase con el elemento que queramos, o con body si queremos aplicarlo a la barra de desplazamiento global del navegador:

.container {
  width: 300px;
  max-height: 50px;
  border: 1px solid #222;
  font-size: 1.5rem;
  color: #fff;
  background: #000;
  padding: 2rem;
  overflow-y: scroll;
}

.container::-webkit-scrollbar {
  width: var(--width, 15px);
  background: indigo;
}

<div class="container">
  <p>Esto es un ejemplo donde va a aparecer una barra de desplazamiento, para que podamos ver como se le puede dar estilo personalizado.</p>
</div>

<input name="width" type="range" value="10" min="1" max="35" /><output>10px</output>

const container = document.querySelector(".container");
const inputWidth = document.querySelector("input[name=width]");

const update = (variable, input) => {
  container.style.setProperty(variable, `${input.value}px`);
  input.nextElementSibling.textContent = input.value + "px";
}

inputWidth.addEventListener("input", () => update("--width", inputWidth));

Observa que aquí lo único que hacemos es cambiar el color de fondo de la barra de desplazamiento y el tamaño de ancho de la misma. Sin embargo, no contiene nada porque aún no falta estilar las demás partes, que veremos a continuación.

El fondo con ::-webkit-scrollbar-track

Con el pseudoelemento ::-webkit-scrollbar-track podemos cambiar el fondo por donde se desplaza la barra de desplazamiento. Ten en cuenta que existe tanto un track como un track-piece, donde este último es una región más interna por donde se puede mover la barra de desplazamiento:

.container::-webkit-scrollbar-track {
  background: #444;
}

.container::-webkit-scrollbar-track-piece {
  background: #555;
}

Normalmente, con utilizar track nos basta, pero si quieres ver bien la diferencia añade un margin: 10px a cada elemento y verás rápidamente la porción que ocupa cada uno.

La barra con ::-webkit-scrollbar-thumb

Además, también tenemos el pseudoelemento ::-webkit-scrollbar-thumb que aplica estilos a la barra de desplazamiento propiamente dicha. Probablemente, es el elemento más importante de los que hemos visto:

.container::-webkit-scrollbar-thumb {
  background: yellowgreen;
}
.container::-webkit-scrollbar-thumb:hover { background: green; }
.container::-webkit-scrollbar-thumb:active { background: deeppink; }

Observa que podemos usar :hover para cambiar estilo cuando mueves el ratón por encima (o :active para cuando pulsas). Vamos a añadir el código que hemos visto hasta ahora al ejemplo inicial anterior:

.container {
  width: 300px;
  max-height: 50px;
  border: 1px solid #222;
  font-size: 1.5rem;
  color: #fff;
  background: #000;
  padding: 2rem;
  overflow-y: scroll;
}

.container::-webkit-scrollbar {
  width: var(--width, 15px);
  background: #333;
}

.container::-webkit-scrollbar-track {
  background: #444;
}

.container::-webkit-scrollbar-thumb {
  background: yellowgreen;
}

.container::-webkit-scrollbar-thumb:hover { background: lawngreen; }
.container::-webkit-scrollbar-thumb:active { background: deeppink; }

<div class="container">
  <p>Esto es un ejemplo donde va a aparecer una barra de desplazamiento, para que podamos ver como se le puede dar estilo personalizado.</p>
</div>

Si lo quisieras podrías añadir otras propiedades interesantes. Por ejemplo, un border-radius: 10px al thumb para hacer que la barra de desplazamiento esté redondeada. Recuerda que no todas las propiedades CSS funcionan en este pseudoelemento.

Los botones con ::-webkit-scrollbar-button

Observa que hasta ahora puedes mover la barra de desplazamiento tanto arrastrando el thumb como pulsando en las zonas vacías del track. Sin embargo, es posible que quieras añadir los clásico botones de desplazamiento, si te parece más intuitivo.

Esto se hace con el pseudoelemento ::-webkit-scrollbar-button, que se puede configurar bastante:

.container::-webkit-scrollbar-button {
  background: #222;
}

Si añades este fragmento de código, verás que aparecen a los extremos unos cuadraditos que son los botones de las barras de desplazamiento. Sin embargo, por defecto aparecen sin icono, ni nada en su interior. Vamos a ponerle solución.

Modificadores para los botones

Existen varios modificadores para nuestros botones, que podemos utilizar en ::-webkit-scrollbar-button:

Ten en cuenta que estos modificadores se añaden al final y son acumulables, por lo que puedes usar varios. Veamos un ejemplo donde además, utilizamos background para añadir un icono SVG para las flechas. En este caso lo hacemos con svg inline, pero se puede perfectamente hacer con un fichero externo .svg:

.container::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg' fill='white'><polygon points='50,0 0,50 100,50'/></svg>");
  background-repeat: no-repeat;
  background-position: 2px 5px;
}

.container::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  background-color: red;
}

.container::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg' fill='white'><polygon points='0,0 100,0 50,50'/></svg>");
  background-repeat: no-repeat;
  background-position: 2px 6px;
}

.container::-webkit-scrollbar-button:single-button:vertical:increment:hover {
  background-color: red;
}

En lugar de :increment o :decrement también podemos utilizar :start o :end, que puede ser más intuitivo en el caso de necesitarlo.

El redimensionador con ::-webkit-resizer

En algún caso podríamos necesitar tener un redimensionador. Para ello, en el CSS del elemento se suele indicar la propiedad resize``con los valores both, horizontalovertical`. Si lo hacemos, veremos que en una esquina nos aparece un redimensionador.

.container::-webkit-resizer {
  background: green;
}

Este redimensionador se puede estilar utilizando el pseudoelemento ::-webkit-resizer. Veámoslo en funcionamiento con todo lo anterior que hemos aprendido en este artículo:

.container {
  width: 300px;
  max-height: 50px;
  border: 1px solid #222;
  font-size: 1.5rem;
  color: #fff;
  background: #000;
  padding: 2rem;
  overflow-y: scroll;
  resize: both;
}

.container::-webkit-scrollbar {
  width: var(--width, 15px);
  background: #333;
}

.container::-webkit-scrollbar-track {
  background: #444;
}

.container::-webkit-scrollbar-thumb {
  background: yellowgreen;
}

.container::-webkit-scrollbar-thumb:hover { background: lawngreen; }
.container::-webkit-scrollbar-thumb:active { background: deeppink; }

.container::-webkit-resizer {
  background: linear-gradient(-45deg, gold 50%, black 50%);
}

.container::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("down.svg");
  background-repeat: no-repeat;
  background-position: 2px 5px;
}

.container::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  background-color: red;
}

.container::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("up.svg");
  background-repeat: no-repeat;
  background-position: 2px 6px;
}

.container::-webkit-scrollbar-button:single-button:vertical:increment:hover {
  background-color: red;
}

<div class="container">
  <p>Esto es un ejemplo donde va a aparecer una barra de desplazamiento, para que podamos ver como se le puede dar estilo personalizado.</p>
</div>