CSS::-webkit-scrollbar

::-webkit-scrollbar nos permite personalizar la barra de desplasamiento, pero no es compatible con ciertos navegadores.

/* width */
::-webkit-scrollbar {
  width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
  background:#2d0d35; 
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #601f70; 
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background:#923fa6; 
}

Nota: las barras de desplazamiento personalizadas no son compatibles con Firefox o Edge, versión anterior 79.

crear barras de desplazamiento personalizada

::-webkit-scrollbarpseudo elemento no estándar, permite modificar la apariencia de la barra de desplazamiento del navegador. Los navegadores que admiten son: Chrome, Edge, Safari y Opera admite.

En este ejemplo encontaras un diseño que cuenta con 12 px de ancho, color de barra rebeccapurple, pista de color violet

/* width */
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  background:#663399; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background:#ee82ee; border-radius:12px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background:#d8bfd8; 
}

Barra de desplazamiento

Pueden usar los siguientes pseudo elementos para personalizar la barra de desplazamiento del navegador:

::-webkit-scrollbar

Barra de desplazamiento

::-webkit-scrollbar-button

Botones de la barra de desplazamiento.

::-webkit-scrollbar-thumb

Controlador de desplazamiento arrastrable.

::-webkit-scrollbar-track

Pista barra de desplazamiento.

::-webkit-scrollbar-track-piece

Pista (barra de progreso) NO está cubierta por el mango.

::-webkit-scrollbar-corner

Esquina inferior de la barra de desplazamiento

::-webkit-resizer

Controlador de cambio de tamaño arrastrable que aparece en la esquina inferior de algunos elementos.