En el pasado, podía personalizar las barras de desplazamiento en IE (por ejemplo, v5.5) con propiedades CSS no estándar como scrollbar-base-color que usaría en el elemento que se desplaza (como el <body>) y hacer cosas totalmente increíbles. IE dejó caer eso.
En estos días, la personalización de las barras de desplazamiento ha vuelto, pero esta vez es WebKit. Es un poco mejor ahora, porque las propiedades tienen el prefijo de proveedor (p. Ej. ::-webkit-scrollbar) y utilice el “DOM de sombra”. Esto ha existido durante un par de años. David Hyatt lo escribió en su blog a principios de 2009.
Los bienes
Las diferentes piezas
Estos son los pseudoelementos en sí mismos. Las partes reales de las barras de desplazamiento.
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
Los diferentes estados
Estos son los selectores de pseudoclase. Permiten una selección más específica de las partes, como cuando la barra de desplazamiento está en diferentes estados.
:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactiveVoy a robar toda esta sección de la publicación del blog de David en el blog de WebKit porque explica bien cada parte:
:horizontal – La pseudoclase horizontal se aplica a cualquier barra de desplazamiento que tenga una orientación horizontal.
:vertical – La pseudoclase vertical se aplica a cualquier barra de desplazamiento que tenga una orientación vertical.
:decremento – La pseudoclase decremento se aplica a botones y piezas de pista. Indica si el botón o la pieza de la pista disminuirá o no la posición de la vista cuando se use (por ejemplo, hacia arriba en una barra de desplazamiento vertical, hacia la izquierda en una barra de desplazamiento horizontal).
:incremento – La pseudoclase de incremento se aplica a botones y piezas de pista. Indica si un botón o una pieza de pista incrementará la posición de la vista cuando se use (por ejemplo, hacia abajo en una barra de desplazamiento vertical, hacia la derecha en una barra de desplazamiento horizontal).
:comienzo – La pseudoclase de inicio se aplica a botones y piezas de pista. Indica si el objeto se coloca antes del pulgar.
:fin – La pseudoclase final se aplica a botones y piezas de pista. Indica si el objeto se coloca después del pulgar.
: doble botón – La pseudoclase de doble botón se aplica a botones y piezas de pista. Se utiliza para detectar si un botón es parte de un par de botones que están juntos en el mismo extremo de una barra de desplazamiento. En el caso de las piezas de la pista, indica si la pieza de la pista se apoya en un par de botones.
: un solo botón – La pseudoclase de un solo botón se aplica a botones y piezas de pista. Se utiliza para detectar si un botón está solo al final de una barra de desplazamiento. Para piezas de pista, indica si la pieza de pista linda con un botón singleton.
: sin botón – Se aplica a las piezas de la pista e indica si la pieza de la pista corre o no hasta el borde de la barra de desplazamiento, es decir, no hay ningún botón en ese extremo de la pista.
: esquina-presente – Se aplica a todas las piezas de la barra de desplazamiento e indica si hay una esquina de la barra de desplazamiento o no.
: ventana inactiva – Se aplica a todas las piezas de la barra de desplazamiento e indica si la ventana que contiene la barra de desplazamiento está activa o no. (En nightlies recientes, esta pseudo-clase ahora también se aplica a :: selection. Planeamos extenderla para que funcione con cualquier contenido y proponerla como una nueva pseudo-clase estándar).
Todos juntos ahora
Estos pseudo elementos y selectores de pseudo clases trabajan juntos. A continuación, se muestran algunos ejemplos aleatorios:
::-webkit-scrollbar-track-piece:start {
/* Select the top half (or left half) or scrollbar track individually */
}
::-webkit-scrollbar-thumb:window-inactive {
/* Select the thumb when the browser window isn't in focus */
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/* Select the down or left scroll button when it's being hovered by the mouse */
}Ejemplo muy simple
Para hacer una barra de desplazamiento personalizada realmente simple, podríamos hacer esto:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}En el que obtendríamos esto en un div simple con texto desbordado verticalmente:
En la naturaleza
Echa un vistazo a las barras de desplazamiento muy sutiles y agradables en el blog Maxvoltar de Tim Van Damme (Actualización de septiembre de 2012: El sitio de Tim ya no usa este diseño):
Lo particularmente bueno aquí es que la barra de desplazamiento está en el elemento del cuerpo, sin embargo, la barra de desplazamiento no está pegada en el borde superior, inferior o derecho de la ventana del navegador como lo están normalmente las barras de desplazamiento. Hice una página de prueba con código que se puede copiar y pegar para lograr un efecto similar:
Ver demostración
En Forrst, usan barras de exploración personalizadas en fragmentos de código que también son bastante agradables. Son menos intensos visualmente y, por lo tanto, no luchan tanto con el resaltado de código.
Relacionado
- Dion Almaer tiene una pequeña y útil página de “depuración” para las barras de desplazamiento con todas las partes en colores llamativos para ver qué es qué. (de este artículo)
- Artículo similar sobre Beautiful Pixels.
- Google Wave se fue un poco por la borda con ellos cuando eso todavía existía.