css - 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