How to change scrollbar css at runtime with javascript?


Tags: javascript,html,css,google-chrome,scrollbar

Problem :

Is it possible to change the css (e.g. Color) of a scrollbar at runtime, by clicking in a button?

This just needs to work in Google Chrome, so I'm using:

::-webkit-scrollbar {
    width:15px;
}
::-webkit-scrollbar-thumb {
    background-color:#999;
    border:solid #fff;
}
::-webkit-scrollbar-thumb:hover {
    background:#777;
}
::-webkit-scrollbar-thumb:vertical {
    border-width:6px 4px;
}

I made this example at jsfiddle: http://jsfiddle.net/wZwJz/
Where I added this button:

<button id="changecss">Change CSS</button>

And a jQuery listener:

$("#changecss").on("click", function(){
   // Action goes here
});

I tried this: $("::-webkit-scrollbar").css("backgroundColor", "#F00"); but obviously there's no element called ::-webkit-scrollbar, so it's impossible for jQuery to find it...



Solution :

After some more hours and many tries I figured out how to solve this.
Here is the jsfiddle: http://jsfiddle.net/promatik/wZwJz/18/

So the trick is to add the class before the specific scrollbar css:

.red::-webkit-scrollbar  { ... }

.blue::-webkit-scrollbar { ... }

Then the body, must have one of this classes (In jsfiddle I'm adding the class by javascript because I can't control the html manually):

$("body").addClass("blue");

And the button just need to toggle the .red and .blue classes.

$("#changecss").on("click", function(){
    $(".red,.blue").toggleClass("red").toggleClass("blue");
});

There's also a problem with the rendering of the scroll bar in Chrome (at least until v25), that can be overcome by removing scrollbars, and adding it again, here is a function for that:

// Hack to force scroll redraw
function scrollReDraw() {
    $('body').css('overflow', 'hidden').height();
    $('body').css('overflow', 'auto');
}

    CSS Howto..

    My slideshow only cycles through one picture

    How to center div and ul using CSS?

    how to get css highlighting and hinting for php files in dreamweaver that are being read as css files?

    How to load CSS in Django templates?

    How to use Css to make CellList flow Horizontally rather than Vertically? (GWT & CSS)

    How to change URL inside CSS?

    How can I show this 2 div side by side?

    How to remove free jqgrid own horizontal scrollbar if autowidth:true is used

    How to hide currently selected li item from being an option when user clicks dropdown again?

    How do I set a different background to current tab?

    CSS height, How to get it to go around inner divs

    How do i put an X on the right side of a block?

    CSS: How to align elements around a centered element?

    How do I get two divs next to eachother, but spaced?

    How To Place Buttons Around A Circle with HTML5 and CSS 3?

    How to align things responsive html CSS

    how to put html inside php code [closed]

    How can I add value to textbox, instead of setting value

    How I can make nice looking matrix of buttons with bootstrap 3?

    css: how to make the third div line up with the first div

    How to persist checking the screen width in Javascript

    How to deselect with CSS?

    how to hide submenus in jquery menu

    How to add a mailto to a sentence without extra spacing?

    How to detect clicks outside of a css modal? [duplicate]

    when click on button then show message

    jQuery - how do I show the full navbar at certain width?

    How to make jQuery UI nav menu horizontal?

    How to Limit the Div Exactly into the Screen Size

    How do I style the scrollbar of a textarea