CSS3 - 如何"恢复":: - webkit-scrollbar属性到默认滚动条

Question

嗨,我正在使用下一个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); 
}

Answer 1

嗨,我刚刚意识到你可以在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}

Answer 2

使用要还原的属性的initial值或unset值（取决于您要还原它们的准确程度）。

这两个值都可以应用于所有 CSS 属性。

例子

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

或者

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

如果要恢复规则的所有属性，则应使用all关键字

例子

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

注意：目前尚无 IE 支持任何这些。
对每个浏览器的不同支持级别（有关详细信息，请参阅链接的文档）