JSFiddle - React, Tailwind, and code Playground

by AntĂłnio Almeida

HTML

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

CSS

#test {
    height: 1000px;
}

.red::-webkit-scrollbar 					{ background:transparent;overflow:visible; width:15px; }
.red::-webkit-scrollbar-thumb 				{ background-color:rgba(192,64,64,0.8); border:solid #FFF; }
.red::-webkit-scrollbar-thumb:hover 		{ background-color:rgba(192,64,64,0.5); }
.red::-webkit-scrollbar-thumb:horizontal 	{ border-width:5px 6px;min-width:40px; }
.red::-webkit-scrollbar-thumb:vertical 	    { border-width:6px 4px;min-height:40px; }

.blue::-webkit-scrollbar 					{ background:transparent;overflow:visible; width:15px; }
.blue::-webkit-scrollbar-thumb 			    { background-color:rgba(32,64,192,0.8); border:solid #FFF; }
.blue::-webkit-scrollbar-thumb:hover 		{ background-color:rgba(32,64,192,0.5); }
.blue::-webkit-scrollbar-thumb:horizontal	{ border-width:5px 6px;min-width:40px; }
.blue::-webkit-scrollbar-thumb:vertical 	{ border-width:6px 4px;min-height:40px; }

JavaScript

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

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

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