Webkit scrollbar dynamic styling

Question

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

Answer 1

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

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