Colorear la barra de scroll del navegador

Tiempo estimado de lectura: 2 minutos

 

Cómo colorear la barra de scroll del navegador

En esta ocasión vamos a ver cómo colorear la barra de scroll del navegador con tus colores corporativos o con los que más te gusten.

El código CSS que vamos a utilizar es muy sencillo, ya lo verás.

Código que vamos a utilizar

Como te he dicho, es un código CSS bastante sencillo de entender y de modificar. El código puede ser algo parecido a este:

/* Código para colorear la barra de scroll de tu web */
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
/* Si no quieres los bordes redondeados borra la siguiente línea */
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: #666;
/* Si no quieres los bordes redondeados descomenta la siguiente línea para utilizar una línea superior e inferior para darle una sensación de profundidad a la barra */
/* outline: 1px solid #333; */
border-radius: 10px;
}

Como puedes ver, no tiene excesiva complejidad, en primer lugar, decimos que el body de nuestra web va a mostrar una barra de scroll personalizada con un tamaño definido. A continuación, establecemos una serie de parámetros, como son las esquinas redondeadas y el color y opacidad de la sombra. Por último configuramos los colores de la barra de scroll.

Ya sabes que puedes adaptarla a tus necesidades, puedes cambiar casi cualquier cosa, pero yo te aconsejo que únicamente cambies los colores que yo he puesto, por aquellos que necesites.

¿Dónde ponemos este código?

Como ya sabes, tenemos varios sitios donde pegarlo, pero ya que es código CSS, te aconsejo que lo pegues en el personalizador de tu tema, ya sabes: menú Ajustes, Personalizar, CSS adicional.

El resultado de este código es el siguiente:

colorear la barra de scroll del navegador
Colorear la barra de scroll del navegador

¿Te ha servido este artículo?, DALE UN APLAUSO. 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. *