javascript Webkit 滚动条动态样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5170779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webkit scrollbar dynamic styling
提问by
I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
我目前正在使用 Webkit 的 ::-webkit-scrollbar CSS 属性对滚动条进行样式设置，并希望在 mousemove 事件上更改这些属性。问题是我似乎找不到动态访问滚动条 CSS 的方法。
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?
是否可以通过 javascript（可能使用 jQuery）动态设置 webkit 滚动条的样式？
回答by António Almeida
There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
这个问题有一个很好的解决方法，您可以为滚动条添加多个具有不同样式的 css 类，然后使用 Javascript 动态更改这些类。
Example:
例子：
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes redand blue:
在类red和之间切换的按钮blue：
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/
这是一个工作小提琴：http: //jsfiddle.net/promatik/wZwJz/18/
回答by SparkShredder
i created page with four tabs each different color set as well as scroll bar however this only worked by giving class to body tag
我创建了带有四个选项卡的页面，每个选项卡设置了不同的颜色以及滚动条，但这只能通过为 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
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
每个选项卡按钮的 javascript（此处仅显示滚动条部分）
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1GreenScrollBar ImageScreenShot2BlueScrollBar Image
回答by olgis
If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/(sorry for ugly colorset).
如果您想在鼠标悬停时更改滚动条属性。你可以用 CSS 来做到这一点，这里有一个例子http://jsfiddle.net/olgis/7Lg2R/（对不起，丑陋的颜色集）。
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state. There are described several ways of doing it, with and without JavaScript.
如果您想在鼠标悬停在容器上时更改滚动条颜色，请查看此帖子Style webkit scrollbar on some state。描述了几种使用和不使用 JavaScript 的方法。
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.
备注：我不知道出于什么原因，这些示例（CSS 和 JavaScript）都不能在我的 Firefox 11 for Mint 中运行，但它们都可以在 Chrome 18.0.1025.151 中完美运行。
回答by matt
You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
您可以使用 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;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip
演示：http: //geryit.com/lib/custom-css3-scrollbars
下载源：http: //geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip
回答by Fi Ras
you can make a <style>tag with id="scrollbar_style"and then add css inside it dynamicly like this :
您可以创建一个<style>标签，id="scrollbar_style"然后像这样动态地在其中添加 css：
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTMLon an element WILL NOT JUST ADDyour new code, it WILL ALSO DELETEwhatever was inside that element.
请记住，在元素上使用innerHTML不仅会添加您的新代码，还会删除该元素内的任何内容。
problem solved.
问题解决了。
回答by Rustam
Yes, you can do it.
是的，你可以做到。
You need to include dynamically css style rule into stylesheet. And then to change it.
您需要将动态 css 样式规则包含到样式表中。然后去改变它。
You can do it by this plugin
你可以通过这个插件来做到
If you don't need to use jQuery - you can do it by pure Javascript: link 1link 2. But there is cross-browser problems.
如果您不需要使用 jQuery - 您可以通过纯 Javascript: link 1 link 2 来完成。但是存在跨浏览器的问题。
回答by Hello Hack
you can define a function in JavaScript with your own css.
您可以使用自己的 css 在 JavaScript 中定义一个函数。
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
在 html 中使用：
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/
更多信息：https: //css-tricks.com/almanac/properties/s/scrollbar/
回答by Silviu-Marian
For this you should replace the scrollbar altogether.
为此，您应该完全替换滚动条。
It's just a matter of picking whichever one gives you the easiest API.
