Personaliza tus barras de scroll con CSS y Webkit

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)
}

Te esperamos en la segunda parte del artículo en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.