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

Question

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

33

嗨，我正在使用下面的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

4个回答

6

对于您想要还原的属性，请使用 initial 值或 unset 值（根据您需要如何还原它们而定）。

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

示例

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

或者

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

如果您想撤销规则的所有属性，应使用all关键词

例如

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

注意：目前所有浏览器都不支持IE。
每个浏览器对其的支持程度不同（有关详细信息，请参见链接文档）。

- Gabriele Petrioli

4

我遇到了问题。我不知道是什么触发了最新版本的Chrome将桌面浏览器的滚动条切换到重叠模式，但这使得页面滚动条看起来对于一个没有经验的用户来说有些错乱。所选答案似乎在我的Lubuntu Linux 20.04.1上的Chrome版本100.0.4896.127中无法工作。因此，在几个小时内，我费力地将设置重新创建为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来适应浏览器的深色和浅色模式。
请注意，我在某些情况下使用rgba(128,128,128,x)，因为从白色或黑色开始使用不透明度会在切换浅色和深色模式时产生奇怪的问题，所以我选择了中等值和不透明度来解决这个问题。
image-rendering:pixelated非常有用，因为否则非常小的上下三角形SVG图标将被反锯齿处理得太多，看起来太不透明。这允许SVG图标在浅色模式下保持其暗度，在深色模式下保持其亮度。

我向Chromium浏览器团队提交了此问题，以便他们可以给我们一些可靠的CSS，以关闭给定元素上的覆盖滚动条，如果需要的话。

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

编辑： 最近，我发现Web服务器缓存与Google Chrome / Chromium / Edge Chromium浏览器存在某种关系，从100+版本开始至少在6/17/2022。当我打开Web服务器缓存时，任何一个子页面在网站上返回到上一个页面（作为一个常规相对链接，而不是history.back();调用），将始终显示覆盖式滚动条而不是固定式滚动条。但是，如果我强制该页面使用网站缓存破坏器的.htaccess规则，则问题消失，并且我可以看到正常的滚动条。

- Volomike

2

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

- egekhter

这不适用于跨站点样式文件。请参见 https://stackoverflow.com/questions/63790794/get-css-rules-chrome-extension，导致问题的网站是 https://tempostorm.com/。 - ubershmekel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ncubica · Accepted Answer

更新于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}

注意: 在IE11上使用unset将不起作用。