如何在运行时用javascript改变滚动条css

How to change scrollbar css at runtime with javascript?

本文关键字：改变 滚动条 css javascript 运行时      更新时间：2023-09-26

是否有可能在运行时通过点击按钮来改变滚动条的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找到它…

经过几个小时和多次尝试，我找到了解决这个问题的方法。
下面是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');
}

你不能像这里提到的那样选择psuedo选择器:链接

你的代码需要这样做:

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

滚动条似乎更奇怪，但在这个小提琴中看到:http://jsfiddle.net/wZwJz/4/

当你将鼠标悬停在它上面时，它的颜色才会改变。我对这方面的知识很感兴趣。所以我会想办法的。但是，至少现在你应该朝着正确的方向前进了。

编辑:因此，经过一番摆弄和谷歌搜索，我要说，到目前为止，这是不可能的。这里有一些最新的注释:link

相关文章：