我目前正在使用Webkit的:: - webkit-scrollbar CSS属性设置滚动条的样式，并希望在mousemove事件上更改这些属性。问题是我似乎无法找到一种动态获取滚动条CSS的方法。
是否可以通过javascript（可能使用jQuery）动态设置webkit滚动条的样式？
这个问题有一个很好的解决方法，您可以为滚动条添加多个具有diffident样式的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/
如果要在鼠标悬停时更改滚动条属性。你可以用CSS来做，这里有一个例子http://jsfiddle.net/olgis/7Lg2R/（抱歉丑陋的colorset）。
如果要在鼠标位于容器上方时更改滚动条颜色，请查看此帖子Style webkit scrollbar on certain state。无论有没有JavaScript，都有几种方法可以解释。
备注：我不知道为什么这些例子（CSS和JavaScript都没有）在我的Firefox 11 for Mint中不起作用，但所有这些都在Chrome 18.0.1025.151中完美运行。
我创建了包含四个选项卡的页面，每个选项卡都有不同的颜色集以及滚动条，但这只能通过将类赋予body标签来实现
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
HTML
<body id="body" class="greenbody" bgcolor="#202020">
每个标签按钮的javascript（此处仅显示滚动条部分）
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image ScreenShot2 BlueScrollBar Image
是的，你可以做到。
您需要将动态css样式规则包含在样式表中。然后改变它。
你可以通过this plugin来做到这一点
如果你不需要使用jQuery - 你可以通过纯Javascript来实现：link 1 link 2。但是存在跨浏览器问题。
您可以使用CSS3设置滚动条的样式，这些通常仅适用于内部滚动条而不适用于实际的浏览器主滚动条。您还可以将MOZ属性添加到以下内容中。
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
演示：http://geryit.com/lib/custom-css3-scrollbars 下载源：http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip
为此，您应该完全替换滚动条。
你可以使用<style>制作一个id="scrollbar_style"标签，然后在其中动态添加css，如下所示：
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
只记得在元素上使用innerHTML肯定不会添加你的新代码，它也会删除该元素中的任何内容。
问题解决了。