如何显示已使用 display:none css 属性隐藏的 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" CSSrule and makescrollbarvisible again，但似乎也没有公认的答案。

Answer 1

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

尝试用不同的值覆盖显示：

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