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:
| ¿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.
