html - 如何显示已使用显示 :none css property? 隐藏的 webkit 滚动条

Question

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

#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 , 但似乎也没有公认的答案。

Answer 1

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

尝试用它可能具有的不同值覆盖显示:

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