Cómo crear: barra de desplazamiento personalizada

Aprenda a crear barras de desplazamiento personalizadas utilizando CSS.

Barra de desplazamiento personalizada

Pruebe usted mismo

Pruebe usted mismo

Nota:Firefox o versiones anteriores a Edge 79 no admiten barras de desplazamiento personalizadas.

Cómo crear una barra de desplazamiento personalizada

Chrome, Edge, Safari y Opera admiten no estándares ::-webkit-scrollbar Un elemento pseudo que nos permite modificar el aspecto de la barra de desplazamiento del navegador.

El siguiente ejemplo crea una barra de desplazamiento de 10px de ancho, con riel/colores de barra gris y deslizador de color oscuro (#888):

/* Ancho */
::-webkit-scrollbar {
  width: 10px;
}
/* Riel */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Deslizador */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* Deslizador al pasar el ratón */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Pruebe usted mismo

Este ejemplo crea una barra de desplazamiento con efecto de sombra:

Ejemplo

/* Ancho */
::-webkit-scrollbar {
  width: 20px;
}
/* Riel */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
/* Deslizador */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

Pruebe usted mismo

Selector de barra de desplazamiento

Para los navegadores webkit, puede usar los siguientes elementos pseudo para personalizar la barra de desplazamiento del navegador:

::-webkit-scrollbar El control deslizante en sí.
::-webkit-scrollbar-button Los botones del control deslizante (flechas hacia arriba y hacia abajo).
::-webkit-scrollbar-thumb El deslizador arrastrable.
::-webkit-scrollbar-track El riel del control deslizante (barra de progreso).
::-webkit-scrollbar-track-piece La parte del riel (barra de progreso) no cubierta por el deslizador.
::-webkit-scrollbar-corner La esquina inferior del control deslizante, donde se entrelazan la barra horizontal y vertical de desplazamiento.
::-webkit-resizer Manijas ajustables arrastrables que aparecen en la esquina inferior derecha de algunos elementos.