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

Posted

技术标签:

【中文标题】如何使用 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;

【讨论】:

以上是关于如何使用 display:none css 属性显示已隐藏的 webkit 滚动条?的主要内容,如果未能解决你的问题,请参考以下文章

过滤掉具有“display:none”作为标签属性或在其 CSS 中的 HTML 元素

理解与应用css中的display属性

jquery控制display属性为none或block

使用 Display: None 属性,真的值得吗? [关闭]

css列表属性与display属性

谁能帮我解释一下Dreamweaver中的CSS的display属性的none、block、inline等都用在啥场合?