CSS3 - 如何“恢复”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

更新 2022

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

---

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

注意： 使用 unset 在 IE11 上不起作用

Answer 2

使用初始值或<您想要的属性的 href="https://developer.mozilla.org/en-US/docs/Web/CSS/unset" rel="noreferrer">取消设置值恢复（取决于您具体如何想要恢复它们）。

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

示例

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

或者

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

---

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

示例

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

---

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

Answer 3

我遇到了麻烦。我不知道到底是什么触发了最新的 Chrome 将桌面浏览器上的滚动条切换到覆盖模式，但这让我感到不安，因为它使页面滚动条对于没有经验的用户来说看起来很糟糕。所选答案似乎不适用于我的 Lubuntu Linux 20.04.1 版本 100.0.4896.127 上的 Chrome 版本。因此，在几个小时的时间里，我煞费苦心地重新创建了 Chrome 系统默认设置，并且在浅色和深色模式下也能工作。请注意，在此示例中，我仅设置 BODY 元素的垂直滚动条的样式，但您可以轻松适应水平滚动条，而不仅仅是将其应用于 BODY 元素。

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

BODY::-webkit-scrollbar-button
{
display:block;
background-color:ButtonFace;
box-shadow:inset 0px 0px 0px 20px rgba(255,255,255,0.3);
height: auto;
width: initial;
background-position: center 5px;
background-size:9px 7px;
image-rendering: pixelated;
background-repeat:no-repeat;
}

BODY::-webkit-scrollbar-button:hover
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.5);
}

BODY::-webkit-scrollbar-button:active
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.7);
}

BODY::-webkit-scrollbar-button:vertical:start:increment,
BODY::-webkit-scrollbar-button:vertical:end:decrement
{
display:none;
}

BODY::-webkit-scrollbar-button:vertical:decrement
{
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='ButtonText'><polygon points='50,00 0,50 100,50'/></svg>");
}

BODY::-webkit-scrollbar-button:vertical:increment
{
background-position: center 6px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='ButtonText'><polygon points='0,0 100,0 50,50'/></svg>");
}

BODY::-webkit-scrollbar-thumb
{
background-color:ButtonFace;
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.3);
border-left:2px solid rgba(255,255,255,0.3);
border-right:2px solid rgba(255,255,255,0.3);
}

BODY::-webkit-scrollbar-thumb:hover
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.5);
}

BODY::-webkit-scrollbar-thumb:active
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.7);
}

BODY::-webkit-scrollbar-track
{
background-color:ButtonFace;
box-shadow:inset 0px 0px 0px 20px rgba(255,255,255,0.3);
}

额外说明：

• 使用 ButtonFace 和 ButtonText 颜色，您可以让滚动条对浅色和深色模式做出反应。然而，这并不能为您提供控件所需的不同级别的明暗。您可能会认为您可以使用 filter:brightness(x); 级别或 opacity:x 级别在控件上创建不同级别的明暗度 - - 但奇怪的是，这些在这些滚动条上不起作用。相反，我发现在大范围内设置一个内嵌 box-shadow ，而没有其他任何东西，使用 rgba 颜色，效果很好。
• 我发现仅在按钮上设置 width:initial 加上 height:auto 就足以设置滚动条控制部分的宽度。
• 我从这里得到了三角形 SVG。请注意，我将其上的 fill 更改为 ButtonText，以便使其在浏览器深色和浅色模式下工作。
• 请注意，我在某些情况下使用了 rgba(128,128,128,x)，因为从不透明度的白色或黑色开始，在切换明暗模式时会产生奇怪的问题，因此我选择了不透明度的中间值来解决那。
• image-rendering:pixelated 非常有用，因为否则非常小的上下三角形 SVG 图标会被过度抗锯齿，以至于看起来太不透明。这使得 SVG 图标能够在浅色模式下保持其暗度，在暗色模式下保持亮度。

我向 Chromium 浏览器团队提交了这个问题，看看他们是否可以为我们提供一些可靠的 CSS 来关闭给定元素上的覆盖滚动条（如果我们需要的话）。

https://bugs.chromium.org/p/chromium/issues/ detail?id=1333947

编辑： 最近，我发现网络服务器缓存与 Google Chrome/Chromium/Edge Chromium 浏览器有关至少在 2022 年 6 月 17 日左右版本 100+ 左右。当我打开 Web 服务器缓存时，网站上返回上一页的任何子页面（作为常规相对链接，而不是 history.back(); 调用）将始终显示覆盖滚动条而不是固定滚动条。但是，如果我强制使用 .htaccess 规则（该规则是网站缓存破坏者）的页面，那么问题就会消失，我会看到像平常一样的滚动条。

Answer 4

正如评论者 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);
        }
    }
}