Creare scrollbar stile gmail

[manurouge]

Buon giorno a tutti.
sono giorni che ci provo ma non ci sono saltato fuori quindi mi rivolgo a voi.

Come posso creare (modificare lo stile) della barra di scorrimento di un div??
mi piacerebbe farla simile a quella di gmail (allego l'immagine)

Grazie a tutti quelli che risponderanno.

[duri93]

ciao
piacerebbe anche a me modificarla così radicalmente...

però credo che ci sia di mezzo una massiccia dose di javascript, che crea la scrollbar con un elemento "normale" (tipo div) e la controlla tramite vari eventi...

cmq aspetta l'arrivo di gente più esperta perchè io non ho mai approfondito il discorso

spero di non averti dato una notizia troppo brutta
ciao ciao

[manurouge]

ciao duri93!!
ho trovato la soluzione.. è fatta coi CSS3 però funziona solo con chrome e non con firefox o IE.
comunque ti allego il codice che devi usare:

             ::-webkit-scrollbar{width:8px;
                                height:5px;
                                background: #eeeeee;
                                margin-right: 10px;
                               }
            ::-webkit-scrollbar:hover{background-color:#eeeeee;
                                     border: none;
                                    }
            ::-webkit-resizer{-webkit-border-radius:4px;
                             background-color:#ffffff;
                             border: none;
                            }
            ::-webkit-scrollbar-thumb{min-height:5px;
                                     min-width:5px;
                                     -webkit-border-radius:4px;
                                     background-color: #aaaaaa;
                                     border: none;
                                    }
            ::-webkit-scrollbar-thumb:hover{background-color: #666666;
                                            border: none;
                                            opacity: 0.85;
                                           }
            ::-webkit-scrollbar-thumb:active{background-color: #333333;
                                             border: none;
                                            }

se usi un editor (io uso netbeans) potrebbe darti errore sui :: ma è giusto così..
adesso divertiti a cambiarlo

[ldetomi]

Non sono proprietà CSS3 ufficiali... sono solo proprietarie di Chrome, quindi dovresti comunque provvedere a un Fallback in JavaScript per estendere tale effetto agli altri browser....