CSS3 - Как "восстановить" :: - свойство webkit-scrollbar на панели прокрутки по умолчанию

Привет, я использую следующий код CSS для стилей прокрутки в Safari и Chrome. И работает действительно здорово, но я столкнулся с следующей проблемой, я бы хотел, чтобы я восстановил значение по умолчанию, когда я просматриваю сайт на своем ipad. Я использую @media css для этого, но я не знаю, как восстановить значения по умолчанию.

@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); 
}

Ответ 1

Я только что понял, что вы можете установить все свойства в авто; и сделает свое дело. Это ответ на свой вопрос, но я думаю, что когда-нибудь у кого-то возникнет такой же вопрос.

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

Я не знаю, существует ли другой метод.

- ОБНОВЛЕНИЕ - похоже, что вы также можете использовать initial и unset значение//возвращая все значения

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

или применить к конкретному {width: unset} || {width: initial}

NOTE: использование unset не будет работать на IE11

Ответ 2

Используйте initial значение или значение unset для свойств, которые вы хотите вернуть (в зависимости от того, как именно вы хотите их вернуть).

Оба эти значения могут применяться ко всем свойствам CSS.

пример

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

или

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

Если вы хотите вернуть все свойства правила, вы должны использовать ключевое слово all

пример

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

Примечание. Пока нет поддержки IE для любого из них.
Различные уровни поддержки для каждого браузера (подробности см. В связанных документах)