Pequeños detalles como el hecho de personalizar las barras de scroll en el diseño de tu sitio web, siempre añaden un valor extra. Mediante pseudo-elementos podemos modificar de forma sencilla el estilo de la barra de scroll con el aspecto que tu quieras. En este tutorial veremos cómo personalizar la barra de scroll en Webkit.
Webkit te permite personalizar la barra de scroll con CSS personalizado. Si está definido el pseudo-elemento scrollbar, Webkit deshabilita el estilo por defecto de la barra de scroll y utiliza el que hayas definido dentro del elemento ::-webkit-scrollbar.
Para eso hemos definido unos cuantos códigos para modificar el aspecto de la barra de scroll y personalizarla como quieras. Para ello utilizaremos únicamente 3 pseudo-elementos, webkit-scrollbar, webkit-scrollbar-track y webkit-scrollbar-thumb. Utiliza estos CSS en tu sitio web para que la barra de scroll luzca diferente.
Estilo 1
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Estilo 2
::-webkit-scrollbar{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
border-radius: 10px;
background-color: #CCCCCC;
}
::-webkit-scrollbar-thumb{
border-radius: 10px;
background-color: #D62929;
background-image: -webkit-linear-gradient(90deg,transparent,rgba(0, 0, 0, 0.4) 50%,transparent,transparent)
}
Estilo 3
::-webkit-scrollbar{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb{
background-color: #F90;
background-image: -webkit-linear-gradient(90deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent)
}