2

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

4

2 回答 2

1

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

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

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

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

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

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

于 2013-03-13T03:18:43.757 回答
1

经过几个小时和多次尝试后，我想出了如何解决这个问题。
这是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');
}
于 2013-03-24T17:44:40.673 回答