change webkit css with jquery or css selector

Question

Can I use jquery to control the look of custom webkit scrollbars? I'm curious because I would like to change the background color of ::-webkit-scrollbar-track-piece when I hover over ::-webkit-scrollbar-thumb. Perhaps there is a way to do this with CSS. I'm open to either solution! Thanks!

Answer 1

I don't think there's a jQuery way to do this, but in native JavaScript you can manipulate rules on the stylesheet objects directly:

document.styleSheets[2].addRule("::-webkit-scrollbar", "width: 300px;");

That works fine. You can also remove rules and change rules: http://www.javascriptkit.com/domref/stylesheet.shtml

You could give your <style> block a title which would make it easy to find in the styleSheets array. Something like:

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/