Barras de scroll personalizadas en WebKit

Publicado el 2 de junio de 2011

por PoseLab

en CSS

| 1 comentario

El objetivo de este post es revisar los estilos necesarios para personalizar el scroll en
WebKit, en base al tutorial de su blog http://www.webkit.org/blog/363/styling-scrolls/ pero
personalizando paso a paso cada una de las partes del scroll. El ejemplo que se muestra en
http://trac.webkit.org/export/41842/trunk/LayoutTests/scrolls/overflow-scrollcombinations.html es difcil de entender ya que en la misma hoja de estilos estn mezcladas
las distintas variaciones y da la impresin que hace falta un gran trabajo con CSS para
personalizar el scroll.
Lo primero que voy a hacer es preparar un div con scrolls para separar esos estilos de los
estilos correspondientes a los de su personalizacin. Los estilos podremos aplicarlos a
cualquier elemento con scroll, la pgina, un iframe, textarea u otro elemento con
overflow.
Seu browser no suporta iframes.
Para indicar que un objeto debe usar un scroll personalizado debemos asociarle el pseudoelemento scroll, que lo que har es ocultar el scroll por defecto del sistema y usar el que se
define en el css. La altura y anchura sern las del scroll horizontal y vertical,
respectivamente.
1 div::-webkit-scroll {width: 15px ;height:15px;}
Seu browser no suporta iframes.
Acabamos de ocultar el scroll por defecto. A continuacin voy a recoger las partes ms
importantes del artculo del blog de WebKit para poder seguir con los ejemplos. El listado

de los pseudo-elementos para la personalizacin de las distintas partes del scroll es:

scrollbar

scrollbar-button

scrollbar-thumb

scrollbar-track

scrollbar-track-piece

scrollbar-corner

resizer

Cada una de estas partes del scroll puede ser personalizada mediante bordes, sombras,
imgenes de fondo, etc. Se pueden utilizar las siguientes pseudo-clases para aplicar a los
pseudo-elementos del scroll:

:horizontal: se aplica a las partes del scroll horizontal.

:vertical: se aplica a las partes del scroll vertical.

:decrement: se aplica al botn y las partes del trayecto del scroll superior e
izquierdo.

:increment: se aplica al botn y las partes del trayecto del scroll inferior y derecho.

:start: indica si el botn y las partes del trayecto van antes de la barra del scroll.

:end: indica si el botn y las partes del trayecto van despus de la barra del scroll.

:double-button: sirve para detectar si un botn va junto a otro en un extremo del

scroll.

:single-button: sirve para detectar si un botn va solo en un extremo del scroll.

:no-button: se aplica a las partes del trayecto para indicar si se desplazan al borde de
la barra de scroll, por ejemplo, cuando no hay botones.

:corner-present: Se aplica a todas las partes del scroll e indica si est presente la
esquina del scroll.

window-inactive: Se aplica a todas las partes del scroll e indica si la ventana del
scroll est activa.

Adems:

las pseudo-classes :enabled, :disabled, :hover y :active se pueden usar con las
distintas partes del scroll.

Puede usarse el valor none de la propiedad display para ocultar partes del scroll.

Se pueden usar mrgenes a lo largo del eje del scroll y pueden ser negativos, por
ejemplo para hinchar el trayecto para cubrir parcialmente los botones.

Si queremos usar las Chrome Developer Tools para ir aplicando los estilos a las diferentes
partes del scroll veremos que no podemos seleccionarlas. As que lo mejor ser crear esos
estilos sobre un div para ir revisndolos en las Developer Tools y luego los trasladaremos
a la parte del scroll a la que queremos que se apliquen. Primero personalizo el track y el
thumb del scroll:
0
1
0
2
0
3
0
4
0
5
0
6
0

.scroll::-webkit-scrollbar-track {
background:#FBFBFB;
box-shadow: 3px 3px 10px rgba(0,0,0,.25) inset;
}
.scroll::-webkit-scrollbar-thumb {
background: #84C4FF;
border-radius: 10px;
border:1px solid rgba(0,0,0,0.3);
box-shadow: -3px -3px 6px rgba(66,137,224,1) inset,3px 3px 3px
rgba(158,226,225,1) inset;
}

7
0
8
0
9
1
0
Seu browser no suporta iframes.
Si voy a plantear unos estilos diferentes para las partes del scroll horizontal y vertical
tendr que usar las pseudo-clases :horizontal y :vertical. Por ejemplo, si quiero plantear un
thumb igual al que se usa en Mac Os tengo que usar imgenes, as que necesitar imgenes
diferentes para thumb vertical y el horizontal. En la demo del blog de WebKit podemos ver
cmo usa mltiples imgenes para personalizar el scroll, pero hay un detalle que no me ha
gustado, el uso de JavaScript para hacer una precarga de las imgenes para evitar un
parpadeo cuando se cambia de imagen en el cambio de estado. En lugar de usar diferentes
imgenes para cada estado creo que sera mejor usar sprites para as evitar el uso de
JavaScript y tener toda la personalizacin del scroll en el CSS. Podemos conseguir esto
simplemente cambiando las coordenadas de la imagen como en el siguiente ejemplo.
Quizs haya que tener en cuenta la fecha del tutorial y que no estaba completamente
implementado la propiedad border-image ya que tambin el funcionamiento de borderimage y webkit-border-image difiere en algunos aspecto.
1.scroll::-webkit-scrollbar-thumb:horizontal {
2
-webkit-border-image: url(scrollbar/thumb-horizontal2.png) 0 15 15 15;
3
border-width: 0 15px;
4}
5::-webkit-scrollbar-thumb:horizontal:hover {
-webkit-border-image: url(scrollbar/thumb-horizontal2.png) 15 15 0 15;
6}
7
Seu browser no suporta iframes.
Ahora voy a seguir con el ejemplo sin imgenes, aadiendo el estilo de scrollbar-button.
Para ello, aado las imgenes de background a cada uno de los botones para que muestren
una flecha. A continuacin doy estilo al resizer y el scrollbar-corner.
0
1
0
2
0
3
0
4
0

/*flechas*/
.scroll::-webkit-scrollbar-button:vertical:decrement{
background-image: url(scrollbar/arrow-up.png), -webkit-lineargradient(left, #f9f9f9 50%,#e2e2e2 100%) ;
background-repeat: no-repeat;
background-position: 3px 4px, 0 0;
}
.scroll::-webkit-scrollbar-button:vertical:increment{
background-image: url(scrollbar/arrow-down.png), -webkit-lineargradient(left, #f9f9f9 50%,#e2e2e2 100%) ;

background-repeat: no-repeat;
5
background-position: 3px 5px, 0 0;
0 }
6 .scroll::-webkit-scrollbar-button:horizontal:decrement{
0
background-image: url(scrollbar/arrow-left.png), -webkit-linear7 gradient(top, #f9f9f9 50%,#e2e2e2 100%) ;
background-repeat: no-repeat;
0
background-position: 4px 3px, 0 0;
8 }
0 .scroll::-webkit-scrollbar-button:horizontal:increment{
9
background-image: url(scrollbar/arrow-right.png), -webkit-linear1 gradient(top, #f9f9f9 50%,#e2e2e2 100%) ;
background-repeat: no-repeat;
0
background-position: 5px 3px, 0 0;
11}
1 /*corner y resizer*/
2 .scroll::-webkit-resizer {
background: #F2F2F2 url(scrollbar/resizer.png)no-repeat 2px 4px;
1
border-top:1px solid #D9D9D9;
3
border-left:1px solid #D9D9D9;
1 }
4 .scroll::-webkit-scrollbar-corner {
background: #F2F2F2;
1
border-top:1px solid #D9D9D9;
5
border-left:1px solid #D9D9D9;
1 }
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2

9
3
0
3
1
3
2
Seu browser no suporta iframes.
Al ver el cdigo css del tutorial del blog de WebKit, la personalizacin del scroll en WebKit
puede parecer difcil y en la que interviene gran cantidad de CSS pero vemos que en
realidad es una tarea muy sencilla . Llegados a este punto lo nico que quedara por hacer
para mejorar nuestro scroll es personalizar cada uno de los estados del scroll enabled,
:disabled, :hover y :active y variar, si lo deseamos, las opciones de los diferentes elementos
del scroll con sus correspondientes pseudo-classes.