Tutorial | Personalizar scroll-bar en css3

Vamos a explicar como poder personalizar la barra del scroll, tanto de nuestro pagina principal como de cualquier contenedor que tenga activa la opción de scroll, el scroll se suele utilizar para poder moverte dentro de la pagina cuando esta tiene mas elementos o es mas alta de que lo que nuestro pantalla puede mostrar, para la cual usamos el scroll para navegar por la totalidad de la pagina.

 

::-webkit-scrollbar { /* 1 */ }

::-webkit-scrollbar-button { /* 2 */ }

::-webkit-scrollbar-track { /* 3 */ }

::-webkit-scrollbar-track-piece { /* 4 */ }

::-webkit-scrollbar-thumb { /* 5 */ }

::-webkit-scrollbar-corner { /* 6 */ }

::-webkit-resizer { /* 7 */ }

Como podéis ver en la imagen se puede personalizar al completo la barra de scroll, tanto vertical como horizontal.

Ahora os voy a poner un ejemplo que he utilizado en alguno de los proyectos que he realizado, donde podeis ver como seria la edicion en CSS para que nuestro scroll cambie de diseño.

/*
* BOX
*/

#box::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}

#box::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}

#box::-webkit-scrollbar-thumb
{
background-color: #000000;
border: 2px solid #555555;
}

 

Como ves en el código CSS, podéis ver que los atributos del scroll se los pongo a una caja ya definida, en este caso es #box, pero podéis añadírselos al propio body o documentos principal, en este caso debemos poner el atributo sin hacer referencia a ningún contenedor, es decir, así -> ::-webkit-scrollbar-thumb.

Podéis personalizar todas las partes del scroll, yo en mi caso solo necesito personalizar 3 partes, que son las mas importantes o claves. Que son la barra general, la barra que se moverá por el espacio que determinemos, según el scroll y el fondo por donde se moverá la barra del scroll.

Como podéis apreciar, yo solamente cambio colores, lo hago mas estrecho y pongo algunos bordes, aquí tenéis mas ejemplos de otros estilos por si queréis coger ideas.

 

One thought on “Tutorial | Personalizar scroll-bar en css3

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *