Personalizar barra de desplazamiento fácilmente

thumbnail

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

personalizar barra de navegador fácil con css

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.