personalized - scrollbar css style for all browsers

Div Scrollbar-¿Alguna manera de darle estilo?

Question

¿Hay alguna forma de controlar el estilo de las barras de desplazamiento de una etiqueta div? Estoy experimentando algunos problemas de contraste entre IE7 y FireFox 3.5.2. ¡Cualquier ayuda sería muy apreciada!

Answer 1

Al mirar la web, encuentro una forma simple de personalizar las barras de desplazamiento.

¡Este es el chico! http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task

¡Y aquí mi implementación! https://dl.dropbox.com/u/1471066/cloudBI/cssScrollbars.png

/* Turn on a 13x13 scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 13px;
}
::-webkit-scrollbar-button:vertical {
background-color: silver;
border: 1px solid gray;
}
/* Turn on single button up on top, and down on bottom */
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: block;
}
/* Turn off the down area up on top, and up area on bottom */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:vertical:increment {
display: none;
}
/* Place The scroll up button at the up */
::-webkit-scrollbar-button:vertical:decrement {
display: none;
}
/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:horizontal:increment {
display: none;
}
/* Place The scroll up button at the up */
::-webkit-scrollbar-button:horizontal:decrement {
display: none;
}
::-webkit-scrollbar-track:vertical {
background-color: blue;
border: 1px dashed pink;
}
/* Top area above thumb and below up button */
::-webkit-scrollbar-track-piece:vertical:start {
border: 0px;
}
/* Bottom area below thumb and down button */
::-webkit-scrollbar-track-piece:vertical:end {
border: 0px;
}
/* Track below and above */
::-webkit-scrollbar-track-piece {
background-color: silver;
}
/* The thumb itself */
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: gray;
}
/* The thumb itself */
::-webkit-scrollbar-thumb:horizontal {
height: 50px;
background-color: gray;
}
/* Corner */
::-webkit-scrollbar-corner:vertical {
background-color: black;
}
/* Resizer */
::-webkit-scrollbar-resizer:vertical {
background-color: gray;
}

Answer 2

No, no puedes en Firefox, Safari, etc. Puedes hacerlo en Internet Explorer. Hay varios scripts que le permitirán hacer una barra de desplazamiento.

Answer 3

También está el proyecto iScroll que le permite personalizar las barras de desplazamiento y hacer que funcione con dispositivos táctiles. http://cubiq.org/iscroll-4

Answer 4

Usando javascript puedes diseñar las barras de desplazamiento. Lo cual funciona bien en IE así como en FF.

Verifique los enlaces a continuación

Desde Twinhelix , Ejemplo 2 , Ejemplo 3 [o] puede encontrar alrededor de 30 tipos de estilos de desplazamiento al hacer clic en el siguiente enlace 30 técnicas de desplazamiento

Answer 5

Este hace bien su trabajo de desplazamiento . Es muy fácil de entender, solo unas pocas líneas de código, bien escrito y totalmente legible.