Cómo HACER - Barra de desplazamiento personalizada
Aprenda a crear una barra de desplazamiento personalizada con CSS.
Barras de desplazamiento personalizadas
Nota: las barras de desplazamiento personalizadas no son compatibles con Firefox o Edge, versión anterior 79.
Cómo crear barras de desplazamiento personalizadas
Chrome, Edge, Safari y Opera admiten el ::-webkit-scrollbar
pseudo elemento no estándar, que nos permite modificar el aspecto de la barra de desplazamiento del navegador.
El siguiente ejemplo crea una barra de desplazamiento delgada (10 px de ancho), que tiene un color de barra/pista gris y un controlador gris oscuro (#888):
Ejemplo
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
Este ejemplo crea una barra de desplazamiento con sombra de cuadro:
Ejemplo
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px
grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
Selectores de la barra de desplazamiento
Para los navegadores webkit, puede usar los siguientes pseudo elementos para personalizar la barra de desplazamiento del navegador:
::-webkit-scrollbar
la barra de desplazamiento::-webkit-scrollbar-button
los botones de la barra de desplazamiento (flechas que apuntan hacia arriba y hacia abajo).::-webkit-scrollbar-thumb
el controlador de desplazamiento arrastrable.::-webkit-scrollbar-track
la pista (barra de progreso) de la barra de desplazamiento.::-webkit-scrollbar-track-piece
la pista (barra de progreso) NO está cubierta por el mango.::-webkit-scrollbar-corner
la esquina inferior de la barra de desplazamiento, donde se encuentran las barras de desplazamiento horizontal y vertical.::-webkit-resizer
el controlador de cambio de tamaño arrastrable que aparece en la esquina inferior de algunos elementos.