CSS3 - Come "ripristinare" :: - Proprietà webkit-barra di scorrimento per la barra di scorrimento di default

Question

Ciao Sto utilizzando il codice CSS accanto barre di scorrimento stile in Safari e Chrome. E funziona davvero bene ma sto affrontando il prossimo numero, vorrei ripristinare il valore predefinito, quando visualizzo il sito sul mio ipad. Sto usando @media css per averlo acquistato ma, non so come ripristinare i valori di default.

@media screen and (min-width: 768px) and (max-width: 1024px) { } 



/*Scroll bar nav*/ 
::-webkit-scrollbar { 
    width: 12px; 
} 

/* Track */ 
::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background:#FFF;  
} 

/* Handle */ 
::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background: rgba(204,204,204,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 
::-webkit-scrollbar-thumb:window-inactive { 
    background: rgba(204,204,204,0.4); 
} 

Answer 1

Ciao, ho appena realizzato che è possibile impostare tutte le proprietà in auto; e farà il trucco. Questo è un self sari ma suppongo che un giorno qualcuno possa avere la stessa domanda.

/*Scroll bar nav*/ 
::-webkit-scrollbar { 
    width: auto; 
} 

/* Track */ 
::-webkit-scrollbar-track { 
    -webkit-box-shadow: auto; 
    -webkit-border-radius: auto; 
    border-radius: auto; 
    background:auto;  
} 

/* Handle */ 
::-webkit-scrollbar-thumb { 
    -webkit-border-radius:auto; 
    border-radius:auto; 
    background:auto; 
    -webkit-box-shadow:auto; 
} 
::-webkit-scrollbar-thumb:window-inactive { 
    background: auto; 
} 

Non so se esiste un altro metodo.

- AGGIORNAMENTO - guardare come si può anche utilizzare il valore initial e unset // ricadenti tutti i valori

::-webkit-scrollbar { 
    all:unset; 
} 

o applicare ad una specifica uno {width : unset} || {width : initial}

Answer 2

Utilizzare il initial value o unset value per le proprietà che si desidera ripristinare (a seconda di come esattamente si desidera ripristinare loro).

Entrambi questi valori possono essere applicati a tutte le proprietà CSS.

esempio

::-webkit-scrollbar { 
    width: initial; 
} 

o

::-webkit-scrollbar { 
    width: unset; 
} 

---

Se si desidera ripristinare tutte le proprietà di una regola allora si dovrebbe utilizzare l'esempio all keyword

::-webkit-scrollbar-thumb { 
    all:unset; 
} 

---

Avviso: supporto No IE per uno di questi come di ancora.
Livelli di variazione del supporto per ciascun browser (vedere i documenti collegati per dettagli)