Personalizar Barra de Scroll con CSS

Gabriel Ramírez|Actualizado: junio 4, 2024

Navegador

Free

La barra de navegación, es ese elemento esencial en cualquier aplicación, suele ser un pilar del diseño y la experiencia del usuario. En este artículo, te guiaremos a través de la modificación de su aspecto, enfocándonos en la personalización del Scroll. Este tutorial será especialmente útil para desarrolladores que buscan añadir un toque creativo y distintivo a sus proyectos.

Aclaración importante con un toque de seguridad:

Es importante mencionar que la personalización del scroll solo es posible en navegadores basados en WebKit, como Chrome o Safari. Sin embargo, no te preocupes, también hemos incluido una solución alternativa para Firefox que, si bien no replica completamente la experiencia, te permitirá obtener un resultado similar.

Comencemos

Agrega los siguientes estilos a tu sitio web, 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));
}

Hasta este punto la barra tendrá un estilo diferente pero lo realmente interesante es que ahora podrás personalizarla con variables.

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 con solo copiar el código que te guste elige alguno y agrégalo a tus estilos:

Estilo 1

:root {
  --scroll-size: 10px;
  --scroll-radius: 10px;
  --scroll-track: rgb(0 0 0 / 40%);
  --scroll-thumb-color: #dfdfdf;
}

CSS by Gabriel Ramírez

Estilo 2

:root {
  --scroll-size: 8px;
  --scroll-radius: 10px;
  --scroll-track: rgb(255 255 255 / 10%);
  --scroll-thumb-color: rgb(0 0 0 / 80%);
}

CSS by Gabriel Ramírez

Estilo 3

:root {
  --scroll-size: 5px;
  --scroll-radius: 10px;
  --scroll-track: rgb(255 255 255 / 10%);
  --scroll-thumb-color: #fff;
}

CSS by Gabriel Ramírez

Estilo 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;
}

CSS by Gabriel Ramírez

Estilo 5

:root {
  --scroll-size: 15px;
  --scroll-radius: 20px;
  --scroll-track: rgb(255 255 255 / 10%);
  --scroll-thumb: linear-gradient(45deg, #00aeff, #a68eff);
}

CSS by Gabriel Ramírez

Estilo 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;
}

CSS by Gabriel Ramírez

Ahora añade la compatibilidad con Firefox

Los navegadores basados en webkit no presentaran problema alguno al leer los estilos anteriores o los tuyos propios, 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;
  }
}

CSS by Gabriel Ramírez

De esta manera parte de los estilos del Scrollbar en otros navegadores, también los verás en Firefox, toma en cuenta que solo será el color del indicador y de la pista.

Gabriel Ramírez

Desde hace 5 años he estado trabajando como independiente, desempeñando funciones como diseñador y desarrollador web, creador de contenido SEO para blogs y SEO en general, manager de email marketing, soporte web y creación de prototipos web. Mi trayectoria profesional, me ha llevado a trabajar con clientes como organizaciones sin fines de lucro, iglesias, plantadores de iglesias, redactor de contenido optimizado para SEO en Blogs y otro tipo de organizaciones a nivel nacional. Sígueme en todas las redes sociales como @esgabrielweb

Todas las entradas del autor