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.

You can't select pseudo-elements with jQuery. You'll have to find another way around this. — BoltClock, Sep 23 '12 at 18:56
Well that's good to know, would you know of a way to achieve this? — spencer, Sep 23 '12 at 19:03
You can mess with the document style rules directly using JS. — BoltClock, Sep 23 '12 at 19:10

score 14 · Accepted Answer · answered Sep 23 '12 at 19:12

14

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

answered Sep 23 '12 at 19:12

gion_13

41,171
10
96
108

It works perfectly, however is there a way to make it dissapear as the class is added, or a way to update it? Currently after adding the class the only way for it to take effect is to scroll the page. – spencer Sep 23 '12 at 20:16
maybe you can force a scroll with js : `$(element-selector).get(0).scrollTop = 0;` – gion_13 Sep 23 '12 at 20:20
I tried that, it has no effect. It still only updates when you apply some sort of input to the window. – spencer Sep 23 '12 at 20:32

Chris · Answer 2 · 2012-09-23T19:14:12.030

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;");
    }
}

Set -webkit-scrollbar-thumb visibility in jQuery

2 Answers2

Linked