La barra de navegación es un elemento común en cualquier aplicación y en este artículo te ayudaré a modificar su aspecto, sobre todo si eres desarrollador y estás buscando como modificar fácilmente el scroll para tus proyectos.
Antes de comenzar debes saber que esta característica solo es posible en navegadores basados en webkit; sin embargo, también e incluido un respaldo para Firefox que, aunque no es lo mismo, se acerca a lo que estés construyendo.
Instalar
Agrega los siguientes estilos a tu sitio web, por ejemplo, si estas usando WordPress deberías agregarlos en tu archivo style.css, en el caso de Blogger utiliza la opción Agregar CSS del Diseñador de Plantilla.
body::-webkit-scrollbar {
width: var(--scroll-size, 10px);
height: var(--scroll-size, 10px);
}
body::-webkit-scrollbar-track {
background-color: var(--scroll-track, transparent);
border-radius: var(--scroll-track-radius, var(--scroll-radius));
}
body::-webkit-scrollbar-thumb {
background-color: var(--scroll-thumb-color, grey);
background-image: var(--scroll-thumb, none);
border-radius: var(--scroll-thumb-radius, var(--scroll-radius));
}
Personalizar
Hasta este punto la barra tendrá un estilo distinto pero lo realmente interesante es que ahora podrás personalizarla con variables. Aquí te dejo la lista completa de las que he creado:
| Variable | Default | Descripción |
|---|---|---|
--scroll-size |
10px |
Tamaño de la barra |
--scroll-radius |
null |
Borde redondeado general |
--scroll-track |
transparent |
Color de la pista (background-color) |
--scroll-track-radius |
--scroll-radius |
Borde redondeado de la pista |
--scroll-thumb |
none |
Fondo del indicador (background-image) |
--scroll-thumb-color |
grey |
Color del indicador (background-color) |
--scroll-thumb-radius |
--scroll-radius |
Borde redondeado del indicador |
Con estas variables puedes crear estilos de la barra principal. A continuación te proporciono algunos ejemplos, estos estilos son los mismos que puedes ver en la demostración en CodePen, solo copia el código que te guste (elige solo uno) y agrégalo a tus estilos:
Ejemplo 1
:root {
--scroll-size: 10px;
--scroll-radius: 10px;
--scroll-track: rgb(0 0 0 / 40%);
--scroll-thumb-color: #dfdfdf;
}
Ejemplo 2
:root {
--scroll-size: 8px;
--scroll-radius: 10px;
--scroll-track: rgb(255 255 255 / 10%);
--scroll-thumb-color: rgb(0 0 0 / 80%);
}
Ejemplo 3
:root {
--scroll-size: 5px;
--scroll-radius: 10px;
--scroll-track: rgb(255 255 255 / 10%);
--scroll-thumb-color: #fff;
}
Ejemplo 4
:root {
--scroll-size: 12px;
--scroll-radius: 20px;
--scroll-track: rgb(0 0 0 / 40%);
--scroll-thumb: linear-gradient(45deg,
rgba(255, 255, 255, 0.25) 20%, transparent 20%,
transparent 40%, rgba(255, 255, 255, 0.25) 40%,
rgba(255, 255, 255, 0.25) 60%, transparent 60%,
transparent 80%, rgba(255, 255, 255, 0.25) 80%);
--scroll-thumb-color: #f97316;
}
Ejemplo 5
:root {
--scroll-size: 15px;
--scroll-radius: 20px;
--scroll-track: rgb(255 255 255 / 10%);
--scroll-thumb: linear-gradient(45deg, #00aeff, #a68eff);
}
Ejemplo 6
:root {
--scroll-size: 12px;
--scroll-radius: 20px;
--scroll-track: rgb(0 0 0 / 40%);
--scroll-thumb: linear-gradient(
rgba(255, 255, 255, 0.3) 20%, transparent 20%,
transparent 40%, rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%, transparent 60%,
transparent 80%, rgba(255, 255, 255, 0.3) 80%);
--scroll-thumb-color: #10b981;
}
Soporte para Firefox
Los navegadores basados en webkit no presentaran ningún problema al leer los estilos, sin embargo Firefox es la excepción. Si deseas incluirlo en la modificación, agrega el siguiente código:
@supports not (selector(::-webkit-scrollbar-thumb)) {
html, body {
scrollbar-color: var(--scroll-thumb-color, grey) var(--scroll-track, transparent);
scrollbar-width: thin;
}
}
De esta manera parte de los estilos del scroll en otros navegadores, también los verás en Firefox, toma en cuenta que solo será el color del indicador y de la pista.
Mixin para Sass
Si eres desarrollador y quieres incluir en tu proyecto la posibilidad de editar la barra de desplazamiento, he diseñado el siguiente mixin que puede ayudarte, solo debes incluir el siguiente código a tu proyecto:
@mixin scroll-style($size: 10px,
$thumb: none,
$thumb-color: grey,
$thumb-radius: 10px,
$track-color: transparent,
$track-radius: 10px) {
// Respaldo para Firefox
@supports not (selector(::-webkit-scrollbar-thumb)) {
scrollbar-color: $thumb-color $track-color;
scrollbar-width: thin;
}
// Navegadores basados en webkit
&::-webkit-scrollbar {
width: $size;
height: $size;
&-track {
background-color: $track-color;
border-radius: $track-radius;
}
&-thumb {
background-color: $thumb-color;
background-image: $thumb;
border-radius: $thumb-radius;
}
}
}
Argumentos
La siguiente tabla contiene información de los parámetros del mixin que puedes definir, y su valor por defecto en caso de que no lo hagas:
| Argumento | Default | Descripción |
|---|---|---|
$size |
10px |
Tamaño de la barra |
$thumb |
none |
Fondo del indicador (background-image) |
$thumb-color |
grey |
Color del indicador (background-color) |
$thumb-radius |
10px |
Borde redondeado del indicador |
$track-color |
transparent |
Color de la pista (background-color) |
$track-radius |
10px |
Borde redondeado de la pista |
Incluir
Puedes llamar al mixin y reemplazar el valor de los argumentos por defecto (en caso de que asi lo requieras), por ejemplo si quieres modificar el scroll de todo el documento:
:root {
@include scroll-style($size: 10px, $thumb-color: #ccc);
}
Si prefieres crear una utilidad que puedas aplicar fácilmente a cualquier elemento y que esta incluya personalización con variables, quizás te interese realizarlo de esta manera:
.scroll {
@include scroll-style(
$size: var(--scroll-size),
$thumb: var(--scroll-thumb),
$thumb-color: var(--scroll-thumb-color),
$thumb-radius: var(--scroll-thumb-radius),
$track-color: var(--scroll-track-color),
$track-radius: var(--scroll-track-radius),
);
}
Ahora solo debes definir las variables en tu archivo de configuración e incluir la clase de la utilidad a los elementos en donde se requiera:
<div class="scroll"></div>
:root {
--scroll-size: 5px;
--scroll-radius: 10px;
--scroll-thumb-color: #464646;
--scroll-track-color: transparent;
}
Por su puesto si tienes sugerencias, correcciones o simplemente quieres compartir la forma en la que realizas, deja un comentario, estaré encantado de leerte.
Conclusión
Aunque personalmente no soy fan de modificar esta barra, sí que puede ser muy útil para darle un poco más de personalidad a tu sitio web, o integrar mejor el diseño de algunos elementos.
Si te ha servido este artículo no olvides compartir y cualquier duda puedes dejarla en un comentario, respondo a todos. Gracias por leer.
