如何使用 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 元素
使用 Display: None 属性,真的值得吗? [关闭]
谁能帮我解释一下Dreamweaver中的CSS的display属性的none、block、inline等都用在啥场合?