en CSS

Personalizar el scroll con CSS

Diseñar un scrollbar compatible con todos los navegadores

Antes de ponernos a personalizar nuestro scroll con CSS conviene saber qué elementos podemos modificar para que el diseño de nuestro scrollbar sea compatible con la mayor cantidad de navegadores posibles.

A este respecto decir que desde el cambio de Edge a Webkit, usando métodos prefijados (-webkit-), podemos personalizar nuestro scroll por igual en casi la totalidad de los navegadores modernos. Sin embargo, es importante entender que este método no es estándar y por lo tanto es susceptible de quedar obsoleto en el futuro.

Por otro lado entre los navegadores no webkit, tenemos a Firefox que sí soporta los estándares. Lamentablemente éstos permiten una estilización muy limitada, aunque, en mi opinión, suficiente para embellecer nuestras páginas. Por esa razón vamos a abordar el tema en dos fases. Primero partiremos de esos estándares para personalizar nuestro scroll y replicaremos exactamente el mismo diseño con webkit. Y a continuación veremos algunas técnicas que harán que nuestras barras de scroll sean perfectas.

Personalizar el scroll para Firefox (método estándar)

En cuanto al aspecto se refiere, podremos modificar su color y su ancho, pero hay otros efectos que podremos replicar en todos los navegadores. Empecemos con el color y el ancho.

Scrollbar-color

Básicamente permite dos valores que corresponderán con en color del thumb y del track, es decir el del manejador o controlador deslizante y el de la barra de scroll.

elemento {
scrollbar-color: #09C transparent;
}

Scrollbar-width

A parte de los valores globales, comunes a todos atributos CSS, ofrece tres opciones: auto, thin y none. Lamentablemente no soporta un valor numérico.

elemento {
scrollbar-width: auto | thin | none;
}

Scrollbar-width: auto

Es el valor por defecto y básicamente deja los estilos a cargo del navegador

Scrollbar-width: thin

Firefox muestra una variante más estrecha de 8px que, además, pierde las flechas de control.

Scrollbar-width: none

Esconde el scroll pero no pierde su función. Es la mejor forma en que podemos ocultar el scroll en FF si queremos manejar el scroll con controladores propios como flechas de paginación. Y es replicable con métodos prefijados (-webkit-).

elemento {
scrollbar-width: none;
}
elemento::-webkit-scrollbar {
width: 0;
}

Personalizar el scroll para Webkit (-webkit-)

Antes de complicar la cosa vamos a replicar lo que ya tenemos en Chrome, Safari, Opera y Edge, también para los webviews.

elemento::-webkit-scrollbar-track {
background-color: transparent; /*color de la barra de fondo*/
}
elemento::-webkit-scrollbar-thumb {
background-color: #09C; /*color del manejador*/
}
elemento::-webkit-scrollbar {
width: 8px; /*ancho del scroll vertical*/
height: 8px; /*alto del scroll horizontal*/
}

Y con esto obtendríamos ya nuestros scroll vertical y horizontal de aspecto moderno para todos los navegadores.

See the Pen
Scroll overlay
by Daniel Abril (@elcssar)
on CodePen.

Con el uso de «transparent» para el color de fondo de las barras de scroll conseguimos un efecto de superposición similar a un mobile scrollbar, las barras de scroll propias de los dispositivos móviles. Sin embargo, ese efecto no es real, pues el espacio lo ocupa la barra mientras esté visible o activa. Pero ¿qué sucede cuando el contenido no provoca overflow?, pues que ese espacio lo ocupa el contenido al desaparecer el scroll, provocando un salto visual, un efecto molesto a la vista con el que seguro os habréis topado. Para solucionarlo vamos a ver 2 opciones:

Scrollbar-gutter

La propiedad scrollbar-gutter permite reservar un espacio para el scroll haya o no overflow, a menos que el valor del atributo overflow sea overlay. Soporta los valores auto, stable y both-edges.

Scrollbar-gutter: auto

Es el valor por defecto. Creará un canal, un espacio reservado para la barra de scroll sólo cuando el valor del atributo overflow sea scroll, o auto si existe overflow, pero no con overlay.

Scrollbar-gutter: stable

Reservará dicho espacio para cualquier valor de overflow excepto overlay, haya o no overflow.

Scrollbar-gutter: stable both-edges

Puede añadirse both-edges a stable para reservar un espacio simétrico en ambos extremos de la línea de la caja.

Juega con el alto del siguiente Codepen para ver la diferencia con un scroll estándar cuando se muestra y oculta el scroll debido al desborde del contenido.

See the Pen
Scroll CSS for FF and Webkit
by Daniel Abril (@elcssar)
on CodePen.

Actualmente este atributo sólo lo soportan Edge, Chrome y Opera desktop, ni Firefox, ni Safari (Mac/iOS) ni por supuesto IE, entre otros, le dan soporte. Sin embargo es el estándar al que aspiramos y si tenemos en cuenta que IE está obsoleto, Firefox es el único que soporta scrollbar-width y scrollbar-color, por lo que es probable que en breve también soporte scrollbar-gutter, y Safari utiliza el efecto de superposición, como hacen los navegadores móviles, puede que la solución encaje en tu abanico de usuarios.

Nota: según las especificaciones del borrador del W3C, scrollbar-gutter podría llegar a soportar otros valores como «always»  que haría que incluso overlay reservase ese canal para el scroll tanto si hay overflow como si no, y añadiendo «force» se reservaría el canal incluso para los valores de overflow visible, hidden y clip.

Overflow: overlay

La segunda opción es simular un mobile scrollbar. Este sería el método para crear realmente un scroll superpuesto, o scroll overlay; nos permite simular en desktop el efecto de transparencias propio de los móviles, pero jugando con el :hover del ratón en lugar de al activarse el scroll.

En cuanto a su soporte en navegadores el mayor problema es Firefox, porque Safari sí lo soporta sólo que lo interpreta como auto. Por suerte Safari por defecto superpone el scroll al contenido. A Firefox sin embargo tendremos que darle una salida elegante que consiste en restar el ancho del scroll (8px) a nuestro padding derecho o izquierdo en función de la dirección del texto (ltr o rtl) y fijar el scrollbar con overflow: scroll.

elemento {
padding: [valor top,right,bottom,left]
/*Firefox*/
overflow: scroll;
scrollbar-color: rgba(0,153,204, 0.15) transparent; /*manejador semi-translúcido en FF*/
scrollbar-width: thin; /*8px*/

/*webkit*/
overflow: overlay;
}

/*Firefox*/
@-moz-document url-prefix() { /*hack para Firefox*/
elemento {
padding-right: [valor right] - 8px) /*ancho del canal del scroll en modo thin para texto ltr*/
}
}
elemento:hover{
scrollbar-color: rgba(0,153,204, 1) transparent; /*manejador opaco en FF*/
}

/*webkit*/
elemento::-webkit-scrollbar {
width: 8px;
height: 8px
}
elemento::-webkit-scrollbar-track {
background-color: transparent; /*fondo del scroll transparente en webkit*/
}
elemento::-webkit-scrollbar-thumb {
background-color: rgba(0,153,204, 0.15); /*manejador semi-translúcido*/
}
elemento:hover::-webkit-scrollbar-thumb {
background-color: rgba(0,153,204, 1); /*manejador opaco*/
}

Y de esta forma logramos un scroll superpuesto al contenido estable, tanto si se produce overflow como si no.

See the Pen
Scroll overlay
by Daniel Abril (@elcssar)
on CodePen.

Soporte en navegadores de estilos CSS para el scroll

atributo/navegador IE EDGE FF Chrome Opera

Nav.
Android

Safari
scrollbar-color NO NO  Desktop support icon NO NO NO NO
scrollbar-width NO NO Desktop support icon NO NO NO NO
scrollbar-gutter NO Desktop support icon  NO mobile support iconDesktop support icon Desktop support icon mobile support icon NO
::-webkit-scrollbar NO Desktop support icon NO mobile support iconDesktop support icon mobile support iconDesktop support icon mobile support icon mobile support iconDesktop support icon*
overflow: overlay NO Desktop support icon  NO mobile support iconDesktop support icon mobile support iconDesktop support icon mobile support icon mobile support icon
scrollbar-face-color Desktop support icon NO  NO NO NO NO NO

*No está soportado en el webview

Tal como se observa en el cuadro los navegadores que no soportan los estándares, tienen sus métodos propietarios. Incluido Internet explorer, que de hecho fue el primero en permitir la personalización del scroll, aunque ahora sea un navegador obsoleto, razón por la que no le hemos dedicado más espacio en este artículo. Pero por si os pica la curiosidad o tenéis que dar soporte a sistemas que no se han actualizado y sólo funcionan en IE, os dejo algunas de las propiedades que permitían cambiar los colores del scroll, antes de la llegada de los estándares.

scrollbar-face-color
scrollbar-shadow-color
scrollbar-highlight-color
scrollbar-3dlight-color
scrollbar-darkshadow-color
scrollbar-track-color
scrollbar-arrow-color

Espero que os haya sido útil. No olvidéis subscribiros para no perderos los próximos artículos en los que veremos cómo y aprenderemos cómo replicar un scroll mobile con nuestros propios estilos.

Escribe un comentario

Comentario