Cómo cambiar el color de la barra de scroll del navegador (solo para Chrome)
En este artículo vamos a ver cómo puedes modificar con código CSS el color de la barra de scroll de tu navegador. Hay que decir que esta opción de momento sólo está disponible para el navegador Chrome (webkit es una propiedad para Chrome), esperemos que pronto el resto de navegadores puedan reconocer este código (por ejemplo, en Firefox no funciona).
Código que vamos a utilizar
El código CSS que vamos a usar en este ejemplo no es demasiado difícil. Puede ser algo como el siguiente:
Como ves, a simple vista no parece demasiado complicado este código. Vamos a ver qué es lo que hace.
En primer lugar, vamos a decirle al navegador que utilizaremos la propiedad ::-webkit-scrollbar, que es la que se encargará de “soportar” el resto de propiedades que vamos a utilizar. Le estamos dando una anchura de 1em, que será el grosor del scroll, es decir el ancho del contenedor que contendrá la barrita (si lo quieres más gruesa puede probar con 1,5 em o 2 em, y si lo quieres más fino, prueba con 0,5 em).
A continuación le decimos que la parte que está debajo de la barrita (::-webkit-scrollbar-track) tendrá un radio de 10px para hacerla redondeada, y un color de sombra interior negro del 30% de opacidad.
Por último, vamos a personalizar la barrita en sí, lo que se denomina thumb (::-webkit-scrollbar-thumb), en nuestro caso le hemos puesto un color verde (#7AB06C), y un borde redondeado para que quede más bonita. Obviamente tú puedes ponerle el que más te guste o el que más se ajuste al color corporativo de tu web.
Por último, la opción outline es una barrita que hay en la parte izquierda del scroll, muy pequeña y apenas perceptible. Yo la he puesto de color negro para que el scroll se diferencia del resto de la ventana donde se muestra el contenido.
Por último, ¿dónde tenemos que colocar este código?
Al tratarse de código CSS, podemos colocarlo directamente en el personalizador de nuestro WordPress. Para ello debes ir al menú Apariencia, Personalizar, CSS Adicional.
Deja que WordPress trabaje por ti, utiliza código.