使用jquery或css选择器更改webkit css

Question

我可以使用jquery来控制自定义webkit滚动条的外观吗？我很好奇,因为我想改变::-webkit-scrollbar-track-piece悬停时的背景颜色::-webkit-scrollbar-thumb.也许有一种方法可以用CSS做到这一点.我愿意接受任何解决方案!谢谢!

Answer 1

我不认为有一种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";
            }
        }
    }
} ?

http://jsfiddle.net/nottrobin/hSEzY/1/