Change webkit css using jquery or css selector

Question

Can jquery be used to control the appearance of custom webkit scrollbars ? I'm curious because I would like to change the background color ::-webkit-scrollbar-track-piece when I hang over ::-webkit-scrollbar-thumb . Perhaps there is a way to do this using CSS. I am open to any decision! Thanks!

Answer 1

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

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

It works great. You can also remove the rules and change the rules: http://www.javascriptkit.com/domref/stylesheet.shtml

You can provide a <style> a title block that will simplify the search 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/