如何在运行时用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 
}); 

我tr灭蝇灯这样的：$("::-webkit-scrollbar").css("backgroundColor", "#F00");但显然没有叫::-webkit-scrollbar元素，所以这是不可能的jQuery找到它......

Answer 1

经过一些更多的小时和许多尝试后，我想出了如何解决这个问题。
这里是的jsfiddle：http://jsfiddle.net/promatik/wZwJz/18/

因此，关键是具体的滚动条CSS前添加类：

.red::-webkit-scrollbar { ... } 

.blue::-webkit-scrollbar { ... } 

然后身体，必须有这个类之一（的jsfiddle我由JavaScript添加类，因为我无法控制手动HTML）：

$("body").addClass("blue"); 

而且按钮只需要切换.red和.blue类。

$("#changecss").on("click", function(){ 
    $(".red,.blue").toggleClass("red").toggleClass("blue"); 
}); 

还有带滚动条的镀铬渲染问题（至少直到V25），可以通过移除滚动条，然后重新添加被克服，这里是一个函数：

// Hack to force scroll redraw 
function scrollReDraw() { 
    $('body').css('overflow', 'hidden').height(); 
    $('body').css('overflow', 'auto'); 
} 

Answer 2

您不能选择伪选择这里提到： link

您的代码将需要做的是这样的：

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

滚动条显得更加古怪在这个小提琴但是看到： http://jsfiddle.net/wZwJz/4/

只有将鼠标悬停在上面，颜色才会更改。我有兴趣更多地了解这一点。所以我会尝试找出一些东西。但至少现在你应该朝着正确的方向前进。

编辑： 因此，经过一点点的摆弄和谷歌搜索，我想说这是不可能的，现在。这里有一些笔记最新的小提琴：link