CSS webkit scrollbar show/hide

Question

Sto usando -webkit-scrollbar e quello che voglio succedere è la barra di scorrimento nascosta sulla pagina di caricamento, e rimane nascosta finché non si passa il mouse sopra il contenitore div a cui è collegato. Quando si passa con il mouse su un'area scorrevole, appare.

Ho provato ad aggiungere: hover e: focus influisce su varie div e regole nel mio CSS senza fortuna.

C'è un modo per fare ciò a cui mi riferisco usando -webkit-scrollbar? Potrei inserire il codice, ma è piuttosto semplice. Solo un div esterno con le regole CSS ad esso associate, quindi un div interno con altezza e larghezza impostate. Quindi le regole CSS per -webkit-scrollbar.

#u #trail ::-webkit-scrollbar { 
    width: 9px; 
    height: 9px; 
} 
#u #trail ::-webkit-scrollbar-button:start:decrement, 
#u #trail ::-webkit-scrollbar-button:end:increment { 
    display: block; 
    height: 0; 
    background-color: transparent; 
} 
#u #trail ::-webkit-scrollbar-track-piece { 
    background-color: #FAFAFA; 
    -webkit-border-radius: 0; 
    -webkit-border-bottom-right-radius: 8px; 
    -webkit-border-bottom-left-radius: 8px; 
} 
#u #trail ::-webkit-scrollbar-thumb:vertical { 
     height: 50px; 
     background-color: #999; 
     -webkit-border-radius: 8px; 
} 
#u #trail ::-webkit-scrollbar-thumb:horizontal { 
    width: 50px; 
    background-color: #999; 
    -webkit-border-radius: 8px; 
} 
#u #trail-overflow { 
    width: 860px; 
    max-height: 500px; 
    overflow: auto; 
} 

Answer 1

vedono questo lavoro demo: http://jsfiddle.net/trpeters1/4RSbp/3/ che è stato derivato da qui:

http://css-tricks.com/examples/WebKitScrollbars/

Answer 2

ho finito per andare con lo slimscroll javascript plugin. Sarebbe bello avere una soluzione tutto-css, ma questo plugin è fatto molto bene e consente l'idea di mostrare/nascondere l'attenzione.

http://rocha.la/jQuery-slimScroll

Answer 3

nascondere lo scrollthumb in WebKit è non-intuitivo! La mia pagina doveva nascondere tutte le funzionalità di scorrimento del browser predefinite per implementare i nostri effetti 'scroll infiniti'. L'unica cosa difficile era la sovrapposizione del "web" del webkit, che compare solo quando lo schermo è in movimento (come lo scorrimento con la rotellina del mouse).

Per nascondere questo webkit scrollthumb abbiamo dovuto applicare alcuni stili a "tutto" e quindi applicare gli effetti nascosti ai miei pollici specifici (dobbiamo farlo a livello di codice perché non siamo sicuri che il contenuto sia abbastanza a lungo da fare i nostri effetti di scorrimento personalizzati fino a quando la pagina non è stata caricata).

Questi sono gli stili che abbiamo usato:

::-webkit-scrollbar { /* required, although an apparent no-op */ 
    color: inherit; 
} 
::-webkit-scrollbar-thumb { /* leave most bars alone */ 
    background-color: grey; 
} 
#customScrollDiv::-webkit-scrollbar-thumb { /* this is the one we care about */ 
    background-color: grey; 
} 
.hideThumb::-webkit-scrollbar-thumb { /* we apply the style to actually hide it*/ 
    display: none; 
}  
.hideThumb { /* required, although an apparent no-op */ 
    background-color: white; 
} 

poi, quando mi accorgo che voglio nascondere programmazione che thumbHandle posso farlo con jQuery: $('#customScrollDiv').toggleClass('hideThumb');

La parte difficile è che avete bisogno un sacco di "default" degli stili CSS che normalmente hai ottenuto dalla scatola, ma una volta che inizi a specificare anche uno di questi stili webkit di cui sopra hai bisogno di THEM ALL o non verranno applicati.

Answer 4

Mi sembra di aver superato l'auto nascondere la cosa in css. In qualche modo l'ho fatto sulla mia app, e stavo cercando come l'ho ottenuto. Qui si tratta di una modifica al violino esistente @ Tim

http://jsfiddle.net/4RSbp/165/

Questo fa il trucco:

body {overflow-y:hidden;} 
body:hover {overflow-y:scroll;} 

Answer 5

È possibile utilizzare semplice CSS per raggiungere questo obiettivo.

Es. se si dispone di un div #content-wrapper che scorre con background-color: rgb(250, 249, 244);

#content-wrapper::-webkit-scrollbar-thumb { 
    background-color: rgb(250, 249, 244); /* Matches the background color of content-wrapper */ 
} 

#content-wrapper:hover::-webkit-scrollbar-thumb { 
    background-color: gray; 
} 

F.Y.I.È possibile impostare l'opacità del pollice su zero (invece di far corrispondere il colore di sfondo), ma l'opacità sembra quindi applicarsi anche ad altre barre di scorrimento sulla pagina.

P.S. Ciò presuppone che il colore di sfondo di ::-webkit-scrollbar-track corrisponde anche al colore di sfondo dello #content-wrapper.