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

原文由 ncubica 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2022 年更新

我大约 10 年前回答了这个问题，似乎在 2021 年之后这个解决方案停止工作，阅读@Volomike 的解决方案，它可能会让你到达你想要的地方。

---

我刚刚意识到您可以将所有属性设置为自动；并且会成功。这是一个自我回答，但我想总有一天会有人提出同样的问题。

 /*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 上不起作用

原文由 ncubica 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

将 initial 值 或 unset 值 用于要还原的属性（ _具体取决于要还原它们的方式_）。

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

例子

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

要么

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

---

如果你想恢复规则的所有属性，那么你应该使用 all 关键字

例子

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

---

注意： 目前还没有 IE 支持其中的任何一个。

对每个浏览器的不同级别的支持（ _有关详细信息，请参阅链接文档_）

原文由 Gabriele Petrioli 发布，翻译遵循 CC BY-SA 3.0 许可协议