Uso de CSS para aplicar estilo a barras de desplazamiento

Las barras de desplazamiento han sido a lo largo del tiempo, un elemento bastante descuidado en lo que a estilo se refiere. El estilo que toman por defecto es muy característico y como tal en muchas ocasiones no coincide con los colores que manejamos en el resto del sitio.

Debemos recordar, que su tipo de visualización varía según el navegador que utilicemos para observar el sitio. Es por esta razón, que se ha buscado a través de distintos métodos, establecer un estilo que permita lograr su adaptación al resto del diseño, pero ninguno ha llegado a un estándar que permita implementarlo de manera correcta en todos los navegadores.

Antes de empezar a explicar este método, utilizado para lograr la aplicación de estilos haciendo uso de CSS únicamente, tenemos que aclarar que para lograr observar una funcionalidad totalmente adecuada debemos hacer uso de un navegador webkit como Safari o Google Chrome. Para el resto de los navegadores, utilizaremos jQuery como complemento para poder replicar el estilo.

Navegadores Webkit

Si bien, puede sonar bastante desmotivador el hecho de que la solución con CSS sólo funcione en navegadores de tipo webkit, debes estar conciente que entre Safari y Google Chrome estamos abarcando más del 40% del mercado actual de usuarios.

Esto hablando únicamente de computadoras de escritorio, ya que en dispositivos móviles como tablets y télefonos celulares, la presencia de un navegador webkit es todavía más probable.

Uso de barras de desplazamiento

Son varios los elementos que pueden contar con una barra de desplazamient en su visualización, entre ellos encontramos a los textarea, iframes y los divs que son declarados con una propiedad de estilo overflow. Para caso de este artículo, haremos uso de un div.

<div class="contenedor">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet eleifend est. Pellentesque velit mi, vestibulum et volutpat a, egestas vitae justo. Maecenas ac neque urna. Mauris viverra, purus id tincidunt posuere, turpis felis rhoncus orci, nec sagittis tellus justo id dui. Integer ac volutpat enim. Quisque volutpat nisl vitae dolor tristique vel fringilla tellus sodales. Morbi ac ipsum mauris, ut faucibus eros. Nam ultricies arcu nibh. Maecenas non velit a quam scelerisque ullamcorper. Nunc vulputate augue vitae nisi ornare dictum scelerisque enim placerat. Aliquam erat volutpat. Sed rutrum tellus eget enim iaculis pellentesque.</p>

<p>Praesent mi lorem, venenatis et pharetra vestibulum, tincidunt nec dolor. Integer pretium nulla nec mi laoreet laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas vulputate nisl in blandit. Mauris eget ligula in ligula feugiat feugiat ultrices ac quam. Donec egestas purus nec quam vulputate accumsan. Suspendisse potenti. Donec auctor ultricies orci eget mollis. Aliquam massa neque, feugiat ac vestibulum a, tempor in nisi. Phasellus egestas, ipsum vitae semper hendrerit, augue libero aliquam sem, sed tempor augue augue non risus. Aliquam adipiscing convallis metus, nec elementum lorem mollis quis. Maecenas ut ipsum nibh, a dictum sapien.</p>

<p>In faucibus vestibulum est, a varius arcu ultrices ac. Fusce sagittis libero sit amet erat placerat gravida. Sed mattis est a enim lacinia scelerisque volutpat ipsum lobortis. Donec vitae laoreet justo. Nam velit nisl, gravida eget laoreet suscipit, imperdiet ut urna. Etiam tincidunt fermentum nisi, id eleifend tellus volutpat in. Mauris hendrerit scelerisque sem nec pharetra. Curabitur facilisis nisi sollicitudin nibh dictum nec vehicula lectus consectetur. Vivamus eu magna a quam aliquet accumsan. Vivamus non urna aliquam lectus imperdiet sodales. Morbi consequat sagittis leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<p>Morbi ultricies semper tempor. Aenean sit amet tempor lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vehicula tempus neque vel venenatis. Nullam vehicula sagittis libero, in lobortis nisi fringilla in. Sed sed erat ipsum. Quisque mi metus, bibendum et porta nec, malesuada ac dui. Suspendisse laoreet, magna a malesuada pharetra, ipsum velit ollicitudin est, a consequat quam eros non nisi. Nunc lectus turpis, vestibulum sit amet volutpat vel, tempor a ipsum. Nullam egestas blandit purus sit amet ullamcorper. Morbi quis dapibus tortor. In hac habitasse platea dictumst. Fusce semper nibh eget neque ultrices auctor. Suspendisse potenti. Suspendisse dapibus ante at erat porta bibendum.</p>
</div>

No te preocupes por entender el texto, es simplemente un div con “dummy data” para lograr obtener barras de desplazamiento cuando hagamos el div pequeño.

Para lograr esto, utilizarmoes el siguiente código CSS.

.contenedor {
      width: 300px;
      height: 300px;
      background-color: #CCC;
      overflow: scroll;
}

Como se puede apreciar utilizamos la propiedad overflow con un valor scroll, esto hara que las barras de desplazamiento siempre aparezcan, aunque el contenido no sea lo suficientemente largo. También podemos utilizar el valor auto, este actuará distinto a scroll, ya que

únicamente agregará las barras cuando sea necesario, como en nuestro caso que el texto es muy largo.

Con este código bastará para poder observar un recuadro con texto y barras de desplazamiento en los extremos derecho e inferior.

Solución con CSS

Empecemos por mostrar la solución a nuestro problema utilizando únicamente CSS, para ello haremos uso de pseudo elementos, los cuales rastrearan a las barras de desplazamiento para así aplicarles el estilo adecuado.

Para lograr esto, haremos uso del prefijo webkit y de las propiedades de scrollbar.

::-webkit-scrollbar {
      width: 15px;
}

Cuando este pseudo elemento esta presente, webkit desactiva su funcionalidad de visualización por defecto utilizada sobre las barras, y a cambio utiliza el CSS que se proveyó.

Para poder complementar el estilo, podemos hacer uso de otros pseudo elementos, como los siguientes:

::-webkit-scrollbar-track {
      background-color: blue;
} 

Con esta instrucción, la nueva barra de desplazamiento tendrá un aspecto plano y se aplicará el color especificado como fondo.

::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.2);
} 

El anterior código lo utilizaremos para darle color al deslizador. Opcionalmente, también podemos dar estilo a los botones que se ubican en la parte superior e inferior de la barra, en caso de ser vertical, o en los extremos laterales en caso de ser horizontal, para ello utilizamos esta sentencia:

::-webkit-scrollbar-button {
      background-color: navy;
}

En caso de que ambas barras de desplazamiento (horizontal y vertical) aparezcan, es recomendado dar un estilo a la esquina, y eso se logra así:

::-webkit-scrollbar-corner {
      background-color: black;
}

El caso de Internet Explorer

Por increíble que parezca, Internet Explorer acepta de manera nativa modificaciones al estilo de sus barras desplazadores, de hecho no sólo acepta si no que fue el primer navegador en incorporar esta clase de funcionalidad. Para ello, IE hace uso de propiedades propias, pero no produce el mismo efecto que logramos con los pseudo elementos en los navegadores webkit.

En caso de que desees probar, este código te servirá en cualquier versión de Internet Explorer:

body {
    scrollbar-face-color: blue;
}

Aplicar estilo en el resto de los navegadores

Como explicamos al principio del artículo, para poder aplicar el estilo al resto de los navegadores como Mozilla, IE y Opera, haremos uso de JavaScript. Siendo más específicos, el nombre del plugin que usaremos es jScrollPane.

En el sitio del plugin, podemos encontrar varios ejemplos los cuales nos ayudarán a entender su funcionamiento, pero para nuestro caso basta con descagar

jQuery, el plugin y colocarlos de la siguiente forma.

    <link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
    <script type="text/javascript">
      jQuery(document).ready(function () {
          if (!jQuery.browser.webkit) {
              jQuery('.contenedor').jScrollPane();
          }
      });
    </script>

Ahora para que coincida con el tema que estamos utilizando, podemos modificar la hoja de estilo “jquery.jscrollpane.css” o agregar el siguiente código en nuestro código para que se sobreescriban los valores:

.jspTrack{
    background: blue;
    position: relative;
}
.jspDrag{
    background: rgba(0,0,0,0.2);
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
}