JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#test { height: 1000px; }
.red::-webkit-scrollbar 					{ overflow:visible; width:100px; }
.red::-webkit-scrollbar-thumb 				{ background-color:rgba(192,64,64,0.8); }
/* .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; } */
.red::-webkit-scrollbar-button       { background: red; height: 50px; }

/* .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');
} */