如何使用 display:none css 属性显示已隐藏的 webkit 滚动条？答案

【问题标题】：How to show webkit scrollbar which has been hidden using display:none css property?如何使用 display:none css 属性显示已隐藏的 webkit 滚动条？
【发布时间】：2014-10-30 09:13:06
【问题描述】：

在一个页面上，我有一个使用 display: none css 属性隐藏的 webkit 滚动条。

#element::-webkit-scrollbar {
    display: none;
}

在我的一个应用级 css 文件中，我尝试覆盖上述 css 规则，但无法显示滚动条

我尝试更改 css，但我无法获得如果 display: none 属性不存在时会出现的确切滚动条。

#element::-webkit-scrollbar {
    -webkit-appearance: none;
     width: 7px;
     display: block;
}

#element::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

上面的 css 使滚动条可见，但它给了我丑陋的滚动条（可能是由于我使用的 css 规则）。

是否有一种简单的方法可以显示 webkit 滚动条，如果 display:none 属性不存在，该滚动条就会出现。我无法更改显示：无，因为它被我的应用程序继承。我只能推翻这条规则。

编辑：

How to override "::-webkit-scrollbar" CSS rule and make scrollbar visible again 提出了一个完全相同的问题，但似乎也没有公认的答案。

【问题讨论】：

使用allow-scroll 之类的类，然后使用#element:not(.allow-scroll)::-webkit-scrollbar 选择display: none。然后只需使用 JavaScript 添加/删除类。
不幸的是::-webkit-scrollbar只支持Chrome浏览器！
@AtalShrivastava：我只在 chrome 上遇到这个问题。
@DJDavid98：我没有完全理解您所说的“然后使用#element:not(.allow-scroll)::-webkit-scrollbar 为您的显示选择：无”的意思。单靠css能做到吗？
Webkit Vertical Scrollbar 这可以帮助你更好地理解 webkit 滚动条

标签： html css google-chrome webkit

【解决方案1】：

如果 display:none 是它隐藏的内容，为什么不直接覆盖显示而不是添加其他属性？

尝试用它可以拥有的不同值覆盖显示：

https://developer.mozilla.org/en-US/docs/Web/CSS/display

【讨论】：

我尝试了 display 属性可以有的所有选项，但似乎都不起作用。

【解决方案2】：

我能够使用

恢复滚动条

#element::-webkit-scrollbar {
    display: unset;
}

【讨论】：