Barra di scorrimento Div - Qualsiasi modo per modellarlo?

Question

Esiste comunque il controllo dello stile delle barre di scorrimento di un tag div? Sto riscontrando alcuni problemi di contrasto tra IE7 e FireFox 3.5.2. Qualsiasi aiuto sarebbe molto apprezzato!

Answer 1

Utilizzando javascript è possibile ridimensionare le barre di scorrimento. Che funziona bene in IE e FF.

Controllare il sottostante collega

From Twinhelix , Example 2 , Example 3 [o] si può trovare qualche tipo di 30 tipi di stile di scorrimento dalla clicca sul link qui sotto 30 scrolling techniques

Answer 2

No, non è possibile in Firefox, Safari, ecc. È possibile in Internet Explorer. Ci sono diversi script là fuori che ti permetteranno di creare una barra di scorrimento.

Answer 3

This one does well its scrolling job. È molto facile da capire, solo poche righe di codice, ben scritte e totalmente leggibili.

Answer 4

C'è anche il progetto iScroll che consente di modellare le barre di scorrimento e di farlo funzionare con dispositivi touch. http://cubiq.org/iscroll-4

Answer 5

Guardando il web trovo un modo semplice per disegnare le barre di scorrimento.

Questo è IL ragazzo! http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task

E qui la mia implementazione! 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; 
}