是否可以通过单击按钮在运行时更改滚动条的 css(例如颜色)?
这只需要在 Google Chrome 中工作,所以我使用:
::-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/ 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/ http://jsfiddle.net/promatik/wZwJz/18/
所以技巧是在特定滚动条 css 之前添加该类:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
那么身体,必须有这个类之一(在jsfiddle中我通过javascript添加类,因为我无法手动控制html):
$("body").addClass("blue");
并且按钮只需要切换.red
and .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');
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)