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

Posted 2023-03-05

【中文标题】如何使用 display:none css 属性显示已隐藏的 webkit 滚动条？

【英文标题】：How to show webkit scrollbar which has been hidden using display:none css property?

【发布时间】：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 滚动条

【参考方案1】：

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

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

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

【讨论】：

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

【参考方案2】：

我能够使用

恢复滚动条

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