Edit Custom Scroll-Bars With JavaScript?

Question

Is it possible to edit custom scroll-bars with javascript?

This is my custom scroll-bar:

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 1px 1px 6px 1px grey; 
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background: yellow; 
    -webkit-box-shadow: inset 1px 1px 6px 1px rgba(0, 0, 0, 0.5); 
}

::-webkit-scrollbar-thumb:window-inactive {
    background: #000000;
}

Changing the scrollbar like so (does not work):

jQuery('::-webkit-scrollbar').css('width', '120px');
jQuery('::-webkit-scrollbar-thumb').css('background', 'orange');

or

document.body.scrollbar.style.width = '120px';
document.body.scrollbar.thumb.style.background = 'orange';

How does one go about doing this? Thank you.

Answer 1

After hours of research, I found that it is impossible to edit the browser's default scrollbar with javascript.

The only solution that I found viable was to use jScrollPane and jQuery's .hover() capabilities to edit the custom html-scrollbar.

You can also apply CSS to the custom html-scrollbar, making it like the browser's defalt scrollbar + javascript editing.

An example of this can be found here.