Webkit滚动条动态样式

Question

我目前正在使用webkit的::-webkit-scrollbar属性设置滚动条的样式，并希望在mousemove事件上更改这些属性。问题是我似乎找不到一种方法来动态地访问滚动条的CSS。

可以通过javascript (可能使用jQuery)动态地设置webkit滚动条的样式吗？

Answer 1

这个问题有一个很好的解决办法，你可以为滚动条添加多个风格不同的css类，然后用Javascript动态地改变这些类。

示例：

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

在red和blue类之间切换的按钮

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

这是一个有用的小提琴：http://jsfiddle.net/promatik/wZwJz/18/

Answer 2

是的，你能做到。

您需要在样式表中动态包含css样式规则。然后去改变它。

你可以通过this plugin来完成

如果你不需要使用Javascript--你可以通过纯jQuery：link 1 link 2来实现。但也存在跨浏览器的问题。

另请参阅Setting CSS pseudo-class rules from JavaScript

Answer 3

如果要在鼠标悬停在滚动条上时更改其属性。你可以用CSS来做这件事，这里是一个例子http://jsfiddle.net/olgis/7Lg2R/ (对不起，丑陋的颜色集)。

如果你想改变滚动条的颜色，如果鼠标在容器上，那么看看这篇文章Style webkit scrollbar on certain state。有几种方法可以做到这一点，无论有没有JavaScript。

备注:我不知道出于什么原因，这些例子(无论是CSS还是JavaScript)都不能在我的Firefox11for Mint中工作，但它们在Chrome18.0.1025.151上都能完美地工作。