html - 我想改变我的滚动条的CSS？

Question

我想使用 css 更改我的滚动条设计。我使用这个 css，但它只适用于 chrome，

<style>

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
</style>

告诉我如何使用 css 在 Firefox 中更改我的滚动条。

提前致谢

Answer 1

如果你想改变滚动条跨浏览器的样式，你必须使用一些（jQuery）插件。我使用这个http://areaaperta.com/nicescroll/demo.html它是跨浏览器兼容且易于实现的。

还有一个很棒的http://jscrollpane.kelvinluck.com/#examples

在这里你可以找到更多http://www.jqueryrain.com/2012/07/jquery-scrollbar-plugin-examples/

Answer 2

如果您想在 mozilla 中使用 CSS 更改它，请将 -moz- 替换为 -webkit-，例如：

-moz-scrollbar { 宽度：12px; }

-webkit- 适用于 chrome 和 safari，-moz- 适用于 firefox，-o- 适用于 Opera，-ms- 适用于 IE。

看来您必须将所有 4 行都放在每个浏览器上，例如：

-webkit-scrollbar {width: 12px;}<br/>
-o-scrollbar {width: 12px;}<br/>
-moz-scrollbar {width: 12px;}<br/>
-ms-scrollbar {width: 12px;}<br/>