Como Personalizar un Scrollbar con CSS Para Todos los Navegadores

3 minuto(s)

En esta página:

Demo Github

En ocasiones necesitamos personalizar el Scrollbar de nuestros sitios web. Esto es posible hacerse con CSS, vamos a darle soporte para los navegadores que estan basados en Chromiun (Google Chrome, Opera, Edge, Vivaldi, etc.) y también en Mozilla Firefox. Estos navegadores son los que más uso tienen o son los más populares en el rubro. En este Post te enseñare a Como Personalizar un Scrollbar con CSS Para Todos los Navegadores, vamos con ello.

Antes de continuar te invito a leer los siguiente artículos:

Asimismo, te invito a escuchar el Podcast: “Como Hacer De La Programación Un Estilo De Vida” y “La Inteligencia Artificial (IA) y el Machine Learning (ML) Siempre Trabajan de la Mano” (Anchor Podcast):

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Como Personalizar un Scrollbar con CSS Para Todos los Navegadores.

HTML

Voy a crear 2 ejemplos, uno será para mostrar un scrollbar por defecto y otro para mostrar nuestro scrollbar personalizado. He creado 2 clases llamadas .scrollbar y .scrollbar-personalizado, tu puedes aplicarlo directamente al body o la ventana del navegador:


<!-- Scrollbar por Defecto -->
<div class="row">
  <div class="col-12">
    <div class="scrollbar">
      <div> Scrollbar <br> Por Defecto </div>
    </div>
  </div>
</div>

<!-- Scrollbar Personalizado -->
<div class="row mt-4">
  <div class="col-12">
    <div class="scrollbar-personalizado">
      <div> Scrollbar <br> Personalizado </div>
    </div>
  </div>
</div>

<div> Scrollbar <br> Por Defecto </div>

</div>

<div> Scrollbar <br> Personalizado </div>

</div>

Estoy usando clases del framework Bootstrap como col-6, etc., pero no te alarmes, es solo para hacer responsive el diseño de la web, ya que la personalización del scrollbar la haremos con puro CSS y nada de frameworks o herramientas adicionales.

CSS

Primero agregaré soporte para el navegador Mozilla Firefox:


/* Firefox  */
.scrollbar-personalizado {
    scrollbar-width: thin;
    scrollbar-color: #ff7f00 #d7be75;
}

/* Firefox */

.scrollbar-personalizado {

scrollbar-width: thin;

scrollbar-color: #ff7f00 #d7be75;

}

Ahora daré soporte para los navegadores basados en Chromiun, como Google Chrome, Opera, Edge, etc.:


/* Chrome, Opera, Edge, etc.  */
.scrollbar-personalizado::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.scrollbar-personalizado::-webkit-scrollbar-track {
    background-clip: content-box;
    border: 2px solid transparent;
}

.scrollbar-personalizado::-webkit-scrollbar-thumb {
    background-color: #ff7f00;
}

.scrollbar-personalizado::-webkit-scrollbar-thumb:hover {
    background-color: #e67200;
}

.scrollbar-personalizado::-webkit-scrollbar-corner, .scrollbar-personalizado::-webkit-scrollbar-track {
    background-color: #d7be75;
}

/* Chrome, Opera, Edge, etc. */

.scrollbar-personalizado::-webkit-scrollbar {

width: 10px;

height: 10px;

}

.scrollbar-personalizado::-webkit-scrollbar-track {

background-clip: content-box;

border: 2px solid transparent;

}

.scrollbar-personalizado::-webkit-scrollbar-thumb {

background-color: #ff7f00;

}

.scrollbar-personalizado::-webkit-scrollbar-thumb:hover {

background-color: #e67200;

}

.scrollbar-personalizado::-webkit-scrollbar-corner, .scrollbar-personalizado::-webkit-scrollbar-track {

background-color: #d7be75;

}

Por último agrego unos estilos para que se visualicen de manera correcta los 2 scrollbars de ejemplo:


/* Estilos para visualizar los Scrollbars */   
[class^=scrollbar] {    
    overflow-y: scroll;
    height: 200px;
}

[class^=scrollbar] div {
    background-image: linear-gradient(130deg, #e8e6e6 0%, #ffffff 100%);
    padding: 50px;    
    width: 250%;    
    height: 400px;    
}