CSS3 - Jak "przywrócić" :: - właściwość webkit-scrollbar do domyślnego paska przewijania

Question

Witam Używam następnego kodu css do stylizowania pasków przewijania w Safari i Chrome. I działa naprawdę świetnie, ale mam do czynienia z następnym problemem, chciałbym przywrócić domyślną wartość, gdy przeglądam witrynę na moim iPadzie. Używam @media css dla osiągnięcia tego, ale nie wiem jak przywrócić wartości domyślne.

@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

Cześć Właśnie zdałem sobie sprawę, że możesz ustawić wszystkie właściwości w auto; i zrobi lewy. To jest self anwser, ale myślę, że pewnego dnia ktoś może mieć to samo pytanie.

/*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; 
} 

Nie wiem, czy istnieje inna metoda.

- AKTUALIZACJA - wyglądać Można również użyć wartości initial i unset // Przywrócenie wszystkie wartości

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

lub zastosowania do konkretnego jednego {width : unset} || {width : initial}

Answer 2

Użyj initial value lub unset value dla właściwości, które chcesz przywrócić (zależności od tego, jak dokładnie chcesz przywrócić im).

Obie te wartości można zastosować do wszystkich właściwości CSS.

przykład

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

lub

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

---

Jeśli chcesz przywrócić wszystkie właściwości reguły należy użyć przykładu all keyword

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

---

Wskazówka: No IE wsparcie dla każdego z nich jak dotąd.
Różne poziomy wsparcia dla poszczególnych przeglądarek (zobacz szczegóły w dokumentach powiązanych)