我能用jQuery控制自定义webkit滚动条的外观吗?我很好奇因为我想在悬停在::-webkit-scrollbar-thumb
上时更改::-webkit-scrollbar-track-piece
的背景颜色。也许有一种使用CSS来做这件事的方式。我对任何解决方案都持开放态度!谢谢!
我能用jQuery控制自定义webkit滚动条的外观吗?我很好奇因为我想在悬停在::-webkit-scrollbar-thumb
上时更改::-webkit-scrollbar-track-piece
的背景颜色。也许有一种使用CSS来做这件事的方式。我对任何解决方案都持开放态度!谢谢!
我不认为有一种 jQuery 的方法可以做到这一点,但在原生的JavaScript中,你可以直接操纵样式表对象上的规则:
document.styleSheets[2].addRule("::-webkit-scrollbar", "width: 300px;");
这很好用。你也可以删除规则和更改规则:http://www.javascriptkit.com/domref/stylesheet.shtml
您可以给您的<style>
块添加一个title
,这将使它在styleSheets
数组中易于查找。例如:
for(var i = 0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
if(sheet.title == 'scrollbar') {
for(var j = 0; j < sheet.rules.length; j++) {
var rule = sheet.rules[j];
if(rule.cssText.match("webkit-scrollbar")) {
rule.style.backgroundColor="yellow";
}
}
}
}
<link rel="stylesheet" title="scroll_main" type="text/css" href="styles/scroll_main.css?<?=time()?>" />
但是脚本似乎在第二行失败了。它无法识别它。我应该用另一种方式来给它一个标题吗?谢谢! - 1252748::-webkit-scrollbar-thumb onHover
的样式更改附加到 ::-webkit-scrollbar-track-piece
上 :( 虽然它仍然非常酷。 - 1252748
::-webkit-scrollbar-thumb:hover + ::-webkit-scrollbar-track-piece { background-color:#3f0; }
。现在我正在尝试使用 jQuery 对其进行排序或处理,类似于这样的代码$(document).ready(function(){ $("body ::-webkit-scrollbar-track-piece").css({ "backgroundColor": "#3f0" }); });
。 - 1252748:before
或webkit滚动条。请参见有效的jQuery选择器。 - Manuel Leuenberger::-webkit-scrollbar-thumb:before{ bacground-color:#f00; }
? - 1252748