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}

NOTE:使用unset将不适用于 IE11

Answer 2

使用initial value或unset value作为要还原的属性（取决于您想要还原的属性）。

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

示例

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

或

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

如果要还原规则的所有属性，则应使用all keyword

例如

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

注意：目前还没有任何IE支持。
对每个浏览器的支持级别不同（请参阅链接的文档了解详细信息）

Answer 3

正如评论者 vsync 所提到的，一旦你隐藏了滚动条，如果你添加一个新的 css 规则来显示滚动条，它就不会按预期工作。

可以用JS解决

let styles = document.getElementsByTagName('style');

for(let i = 0; i < styles.length; i++) {
    let style = styles[i];

    let rules = style.sheet.cssRules;

    for(let r = 0; r < rules.length; r++) {

        let rule = rules[r];

        if(rule.selectorText === '::-webkit-scrollbar') {
            style.sheet.deleteRule(r);
        }
    }
}

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

3 个答案: