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 usar javascript, puede aplicar estilos a las barras de desplazamiento. Lo cual funciona bien en IE así como en FF.

Comprobar el siguiente vincula

From Twinhelix , Example 2 , Example 3 [o] se puede encontrar algún tipo de 30 tipos de estilo de desplazamiento haciendo clic en el enlace de abajo 30 scrolling techniques

Answer 2

No, no se puede en Firefox, Safari, etc. Se puede en Internet Explorer. Hay varios scripts que le permitirán hacer una barra de desplazamiento.

Answer 3

This one does well its scrolling job. Es muy fácil de entender, solo unas pocas líneas de código, bien escrito y totalmente legible.

Answer 4

También existe 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 5

Al buscar en la web encuentro una forma simple de estilo de 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; 
}