javascript - 如何在运行时使用 javascript 更改滚动条 css？

Question

是否可以通过单击按钮在运行时更改滚动条的 css(例如颜色)？

这只需要在谷歌浏览器中工作，所以我正在使用:

::-webkit-scrollbar {
    width:15px;
}
::-webkit-scrollbar-thumb {
    background-color:#999;
    border:solid #fff;
}
::-webkit-scrollbar-thumb:hover {
    background:#777;
}
::-webkit-scrollbar-thumb:vertical {
    border-width:6px 4px;
}

我在 jsfiddle 做了这个例子:http://jsfiddle.net/wZwJz/
我在哪里添加了这个按钮:

<button id="changecss">Change CSS</button>

还有一个 jQuery 监听器:

$("#changecss").on("click", function(){
   // Action goes here
});

我试过这个:$("::-webkit-scrollbar").css("backgroundColor", "#F00"); 但显然没有名为 ::- 的元素webkit-scrollbar，所以jQuery不可能找到它...

Answer 1

您不能选择这里提到的伪选择器: link

您的代码需要执行如下操作:

$("#changecss").on("click", function(){
    var ss = document.styleSheets[0];
    ss.insertRule('::-webkit-scrollbar {background-color: red}', 0);
});

然而，在这个 fiddle 中，滚动条似乎更奇怪: http://jsfiddle.net/wZwJz/4/

在将鼠标悬停在上面之前，颜色不会改变。实际上，我有兴趣了解更多相关信息。所以我会想办法。但是，您现在至少应该朝着正确的方向前进。

编辑: 因此，经过一些摆弄和谷歌搜索之后，我要说到目前为止这是不可能的。这是带有一些注释的最新 fiddle :link