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

【问题标题】：How to change scrollbar css at runtime with javascript?如何在运行时使用 javascript 更改滚动条 css？
【发布时间】：2013-02-28 20:27:07
【问题描述】：

是否可以在运行时通过单击按钮来更改滚动条的 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不可能找到它......

【问题讨论】：

标签： javascript html css google-chrome scrollbar

【解决方案1】：

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

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

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

滚动条似乎更奇怪，正如在这个小提琴中看到的那样： http://jsfiddle.net/wZwJz/4/

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

编辑：因此，经过一番摆弄和谷歌搜索后，我要说目前这是不可能的。这是带有一些注释的最新小提琴：link

【讨论】：

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

【解决方案2】：

经过几个小时和多次尝试后，我想出了如何解决这个问题。
这是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");
});

Chrome 中滚动条的渲染也存在问题（至少在 v25 之前），可以通过移除滚动条并再次添加它来解决这个问题，这里有一个函数：

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

【讨论】：