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); 
}
12
css html ipad

2 ответов

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

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

20

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

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

пример

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

или

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

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

пример

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

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

2