Webkit Scrollbar Dynamic Styling

January 13, 2024 Post a Comment

I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't se

Solution 1:

There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.

Example:

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

A button that toggles between the classes red and blue:

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

Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/

Solution 2:

Yes, you can do it.

You need to include dynamically css style rule into stylesheet. And then to change it.

You can do it by this plugin

If you don't need to use jQuery - you can do it by pure Javascript: link 1 link 2. But there is cross-browser problems.

Also see Setting CSS pseudo-class rules from JavaScript

Solution 3:

If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).

If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.

Baca Juga

REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.

Solution 4:

i created page with four tabs each different color set as well as scroll bar however this only worked by giving class to body tag

body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png"); 
}

body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png"); 
}

html

<body id="body"class="greenbody" bgcolor="#202020">

javascript for each tab button(only scroll bar section shown here)

document.getElementById("body").className="greenody";
.........other function().... 
document.getElementById("body").className="bluebody";

ScreenShot1 GreenScrollBar Image ScreenShot2 BlueScrollBar Image

Solution 5:

For this you should replace the scrollbar altogether.

It's just a matter of picking whichever one gives you the easiest API.

JavaScript Exercises