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

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

这只需要在Google Chrome中工作，所以我使用：

::-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;
}

我在JSFIDLE上做了这个例子：
我在此处添加了此按钮：

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

---

我试过这样做：

$（“：-webkit scrollbar”）.css（“backgroundColor”，“#F00”）

但显然没有名为

：-webkit scrollbar

，因此jQuery不可能找到它…

您不能选择此处提到的psuedo选择器：

您的代码需要执行以下操作：

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

然而，从这把小提琴上看，滚动条似乎更奇怪：

直到你将鼠标悬停在它上面，颜色才会改变。事实上，我有点想了解更多。所以我会想办法的。然而，至少你现在应该朝着正确的方向前进

编辑：

---

所以，在做了一些拨弄和谷歌搜索之后，我想说，到目前为止，这是不可能的。下面是一些最新的注释：

经过几个小时的努力，我终于找到了解决方法。
以下是JSFIDLE：

因此，诀窍是在特定的滚动条css之前添加类：

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

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

然后，主体必须有这样一个类（在JSFIDLE中，我通过javascript添加该类，因为我无法手动控制html）：

按钮只需切换

.red

和

.blue

类即可

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

在Chrome中呈现滚动条也有一个问题（至少在v25之前），可以通过删除滚动条并再次添加滚动条来解决，下面是一个函数：

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

---

肖恩·科克，谢谢你花时间+1.为了努力。。。现在，我将删除我的应用程序更改滚动条颜色的功能。

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

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