我目前正在使用 Webkit 的 ::-webkit-scrollbar CSS 属性设置滚动条的样式，并希望在 mousemove 事件上更改这些属性。问题是我似乎找不到动态访问滚动条 CSS 的方法。
是否可以通过 javascript（可能使用 jQuery）动态设置 webkit 滚动条的样式？
【问题讨论】：
标签： javascript css webkit scrollbar
为此，您应该完全替换滚动条。
【讨论】：
"possibly using jQuery"
是的，你可以做到。
您需要在样式表中动态包含 css 样式规则。 然后去改变它。
你可以通过this plugin来做
如果您不需要使用 jQuery - 您可以通过纯 Javascript 来完成： link 1 link 2。 但是存在跨浏览器的问题。
【讨论】：
如果您想在鼠标悬停时更改滚动条属性。你可以用 CSS 来做，这里是一个例子http://jsfiddle.net/olgis/7Lg2R/（对不起，丑陋的颜色）。
如果您想在鼠标悬停在容器上时更改滚动条颜色，请查看此帖子Style webkit scrollbar on certain state。描述了几种方法，有和没有 JavaScript。
备注：我不知道出于什么原因，这些示例（使用 CSS 和 JavaScript）都不能在我的 Firefox 11 for Mint 中运行，但它们都可以在 Chrome 18.0.1025.151 中完美运行。
【讨论】：
您可以使用 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
【讨论】：
这个问题有一个很好的解决方法，你可以为滚动条添加多个样式不同的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/
【讨论】：
overflow 的值并获取身体的高度。 document.body.style.overflow = 'hidden';document.body.offsetHeight;document.body.style.overflow = 'auto';
您可以使用id="scrollbar_style" 创建一个<style> 标记，然后像这样在其中动态添加css：
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
请记住，在元素上使用 innerHTML 不会只是添加您的新代码，它还会删除该元素内的任何内容。
问题解决了。
【讨论】：
我创建的页面有四个选项卡，每个选项卡都设置了不同的颜色以及滚动条 然而，这只能通过给身体标签类来工作
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";
ScreenShot1GreenScrollBar Image ScreenShot2BlueScrollBar Image
【讨论】：
您可以使用自己的 css 在 JavaScript 中定义一个函数。
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
在 html 中使用：
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
【讨论】：