Possiamo rilasciare la proprietà CSS "-webkit-scrollbar" da un singolo nodo?

Question

Come posso eliminare la proprietà CSS ::-webkit-scrollbar da un singolo elemento HTML?

Nel mio file CSS, ho questo codice:

::-webkit-scrollbar { 
    width: 6px; 
    height: 6px; 
    background-color:transparent; 
} 
::-webkit-scrollbar-track { 
    background-color:transparent; 
    width: 6px; 
} 
::-webkit-scrollbar-track-piece { 
    background-color: blue; 
} 
::-webkit-scrollbar-thumb {  
    background-color: #d4dee8; 
    width: 6px; 
} 

andrà a sostituire ogni barra di scorrimento con barre di scorrimento WebKit. Ma ci sono due posti in cui non ho bisogno della barra di scorrimento del webkit, ho bisogno invece di normali barre di scorrimento.

file HTML:

<td class="viewDialogLabel" height="21" style="width:156px;padding:0px"> 
    <!-- Inner elements ---> 
</td> 

Qui, ho bisogno di cambiare classe viewDialogLabel a barre di scorrimento normali.

Come ottengo questo effetto?

Answer 1

WebKit supporta il pratico valore CSS initial, che riporta le proprietà ai valori che avrebbero avuto se non fossero stati applicati stili alla pagina.

Quindi, è possibile ripristinare i valori ::-webkit-scrollbar che hai impostato in questo modo:

.viewDialogLabel::-webkit-scrollbar { 
    width: initial; 
    height: initial; 
    background-color:initial; 
} 
.viewDialogLabel::-webkit-scrollbar-track { 
    background-color:initial; 
    width: initial; 
} 
.viewDialogLabel::-webkit-scrollbar-track-piece { 
    background-color: initial; 
} 
.viewDialogLabel::-webkit-scrollbar-thumb {  
    background-color: initial; 
    width: initial; 
} 

Vedi http://jsfiddle.net/uVGKr/

---

WebKit supporta anche the :not() selector, quindi avrei pensato la seguente modifica al vostro il CSS originale impediva l'applicazione delle barre di scorrimento personalizzate a quella cella della tabella:

:not(.viewDialogLabel)::-webkit-scrollbar { 
    width: 6px; 
    height: 6px; 
    background-color:transparent; 
} 
:not(.viewDialogLabel)::-webkit-scrollbar-track { 
    background-color:transparent; 
    width: 6px; 
} 
:not(.viewDialogLabel)::-webkit-scrollbar-track-piece { 
    background-color: blue; 
} 
:not(.viewDialogLabel)::-webkit-scrollbar-thumb { 
    background-color: #d4dee8; 
    width: 6px; 
} 

Tuttavia, non funziona per me in Chrome 16 - gli stili di barra di scorrimento personalizzati non vengono applicati affatto (vedere http://jsfiddle.net/uVGKr/1/). Non sono sicuro se sto facendo qualcosa di sbagliato, se proprio non riesci a combinare questi selettori, o se si tratta di un bug di WebKit.

Come per la tua modifica suggerito di rimuovere le td selettori del CSS, questo sembra funzionare in Chrome 24, almeno: http://jsfiddle.net/uVGKr/2/

Answer 2

È possibile specificare un selettore più accurata:

.new-scrollbar::-webkit-scrollbar { 
    /* ... */ 
} 

Poi, solo gli elementi con la classe nuova barra di scorrimento avrà le barre di scorrimento personalizzate.

Oppure si può provare a sostituire le proprietà di elementi specifici:

.old-scrollbar::-webkit-scrollbar { 
    background: none; 
} 

.old-scrollbar::-webkit-scrollbar-track { 
    background: none; 
} 

/* ... */ 

provare anche con differenti proprietà/valori.

Answer 3

Invece di rimuovere questi oggetti di questi due elementi è possibile specificare una classe o id separata per questi due elementi e sostituisci gli stili -webkit-scrollbar con quelli nuovi