En este articulo te ayudaré a mejorar el aspecto de la barra de desplazamiento editando estilos, aunque de momento esto solo es posible en navegadores basados en webkit, como lo son Opera, Chrome, Safari, UC Browser, entre otros, lamentablemente firefox e IE quedan fuera. En este aporte aprenderemos a personalizar el scrollbar usando solo css.
Instalar
Para agregar las barras personalizadas, primero identifica desde la demostración el estilo que más te guste. Una vez lo tengas claro, agrega el código que corresponda a los estilos que te gustaron. En el caso de Blogger, ve a Temas, preciona el boton "Personalizar", luego ve a opciones avanzadas, CSS Personalizado y pega el código que hayas elegido:
Skin #1 - Blanco
body::-webkit-scrollbar {
width: 6px; /*=> ancho del scroll*/
}
body::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.1); /*=> color de fondo del trayecto del scroll */
}
body::-webkit-scrollbar-thumb {
background-color: #ffffff; /*=> color del indicador del scroll */
}
Skin #1 - Mínimo
body::-webkit-scrollbar {
width: 5px; /*=> ancho del scroll*/
background-color: #ffffff; /*=> Color del fondo principal */
}
body::-webkit-scrollbar-track {
background-color: rgba(38, 50, 56, 0.19); /*=> color de fondo del trayecto del scroll */
}
body::-webkit-scrollbar-thumb {
background-color: #263238; /*=> color del indicador del scroll */
border-radius: 10px; /*=> bordes redondeados */
}
Skin #3 - Relieve
body::-webkit-scrollbar {
width: 10px; /*=> ancho del scroll*/
background-color: #cecece; /*=> Color del fondo principal */
}
body::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.3); /*=> color de fondo del trayecto del scroll */
-webkit-box-shadow: inset 0 0px 10px rgba(0, 0, 0, 0.38); /*=> sombra */
}
body::-webkit-scrollbar-thumb {
background-color: #ababab; /*=> color del indicador del scroll */
border-radius: 10px; /*=> bordes redondeados */
-webkit-box-shadow: inset 0 2px 15px rgb(255, 255, 255); /*=> sombra */
}
Skin #4 - Cinta
body::-webkit-scrollbar {
width: 8px; /*=> ancho del scroll*/
background-color: #000000; /*=> Color del fondo principal */
}
body::-webkit-scrollbar-track {
background-color: #ffffff;
}
body::-webkit-scrollbar-thumb{
background-color: #00BCD4; /*=> color del indicador del scroll */
border-radius: 10px; /*=> bordes redondeados */
background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.3) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, 0.3) 50%,rgba(255,255,255,.3) 75%,transparent 75%,transparent);
}
Skin #5 - Cinta 2
body::-webkit-scrollbar {
width: 8px; /*=> ancho del scroll*/
background-color: #000000; /*=> Color del fondo principal */
}
body::-webkit-scrollbar-track {
background-color: #ffffff;
}
body::-webkit-scrollbar-thumb{
background-color: #8BC34A; /*=> color del indicador del scroll */
border-radius: 10px; /*=> bordes redondeados */
background-image:-webkit-linear-gradient(45deg,rgba(0,0,0,.3) 25%,transparent 25%,transparent 50%,rgba(0,0,0, 0.3) 50%,rgba(0,0,0,.3) 75%,transparent 75%,transparent);
}
Skin #6 - Colorido
body::-webkit-scrollbar {
width: 12px; /*=> ancho del scroll*/
background-color: #000000; /*=> Color del fondo principal */
}
body::-webkit-scrollbar-track {
background-color: #ffffff;
}
body::-webkit-scrollbar-thumb{
background-color: #8BC34A; /*=> color del indicador del scroll */
}
body::-webkit-scrollbar-button {
background-color: #009688; /*=> color de flechas */
}
Una vez hayas seleccionado y pegado el código correctamente, guarda los cambios y listo. Recuerda que si usas Firefox o IE no apreciaras los cambios.
Personalizar
Como ya habras notado, todo el código css está comentado, con el fin de que puedas modificar los estilos fácilmente, por ejemplo, si queremos cambiar el color del indicador del scroll, modificamos esto:
body::-webkit-scrollbar-thumb {
background-color: #ffffff; /*=> color del indicador del scroll */
}
Y le damos un nuevo color, en este caso lo cambiare a negro, quedándo finalmente de esta forma:
body::-webkit-scrollbar-thumb {
background-color: #000000; /*=> color del indicador del scroll */
}
Siguiendo esa misma logica, solo necesitas elegir el estilo que más te agrade y modificar el css comentado con los colores y estilos más acorde a tu web. Ahora en cuanto a los pseudo elementos disponibles para personalizar la barra desplazamientos, tenemos los siguientes:
::-webkit-scrollbar {} /* => Barra de desplazamiento */
::-webkit-scrollbar-button {} /* => Los botones (flechas que apuntan hacia arriba y hacia abajo)*/
::-webkit-scrollbar-thumb {} /* => indicador de desplazamiento*/
::-webkit-scrollbar-track {} /* => Contenedor de la barra de progreso */
::-webkit-scrollbar-track-piece {} /* => barra de progreso*/
::-webkit-scrollbar-corner {} /* => Esquina inferior de las barras de desplazamiento */
::-webkit-resizer {} /* => Arrastrable para cambiar de tamaño */
Pero como ya vimos en el código desarrollado para este aporte, no es obligatorio utilizar todas las propiedades, solo las necesarias para las modificaciones que intentamos conseguir. Sin embargo, si deseas saber más acerca de ello, te recomiendo el articulo de CSS-tricks sobre barras de dezplazamiento.
