Set -webkit-scrollbar-thumb visibility in jQuery

Question

I tried setting the visibility of the scrollbar thumb via jquery like so:

$('-webkit-scrollbar-thumb').css('visibility', 'hidden')

But it didn't actually do anything. Here's my CSS Definition:

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    background: rgba(150, 150, 150, 0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    border-radius: 2;
    margin: 5px;
}

I can't disable scrolling by hiding the overflow because I still need scrolling enabled, I just need to hide the scrollbar thumb through javascript.

Answer 1

You cannot query html pseudo-elements with jQuery.
You need to use a workaround for this kind of rules: specify 2 different rules in the css :

/*normal*/
::-webkit-scrollbar-thumb {
    /*...*/
}

/*hidden*/
.hide-scrollbar ::-webkit-scrollbar-thumb{
    visibility : hidden;
}

And then enable/disable them simply by adding/removing classes from the root node (html) :

$('html').addClass('hide-scrollbar');
// now the second rule is active and the scrollbar is hidden

Answer 2

You can use pure JavaScript to do this:

document.styleSheets[2].addRule("::-webkit-scrollbar-thumb", "visibility: hidden;");

To be able to select your right stylesheet, give it a title (using the title attribute in your link or style tag), and then do:

for(var i = 0; i < document.styleSheets.length; i ++) {
    var cursheet = document.styleSheets[i];
    if(cursheet.title == 'mystylesheet') {
        cursheet.addRule("::-webkit-scrollbar-thumb", "visibility: hidden;");
    }
} ​