Cambiar el color de la barra de scroll (Chrome)

Tiempo estimado de lectura: 3 minutos

 

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:

*/ Modificar el color de la barra de scroll con CSS */
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: #7AB06C;
outline: 1px solid #000000;
border-radius: 10px;
}

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.

Componentes de la barra de scroll
Componentes de la barra de scroll (imagen conrtesía de https://developpaper.com/css-set-scroll-bar-style/)

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.

 


¿Te ha servido este artículo?, DALE CHORIZO CON NOCILLA 0


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

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

He leído y acepto la política de privacidad de este sitio. *