JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body {
    height: 1000px;
}

::-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;
}

::-webkit-scrollbar-thumb {
     background: red;   
}

JavaScript

//commenting this out so we can test onload first
//$("#changecss").on("click", function(){
   var ss = document.styleSheets[2];
    //insert the rule
    //ss.insertRule('::-webkit-scrollbar-thumb {background-color: red}', ss.cssRules.length);
    
    //console.log(ss.cssRules);
    
    // or target it directly which you can loop and search for the string
    // but i just logged it out above and will change to the exact number below
    var rules = ss.cssRules[2];
    
    //rule for the scroll-bar-thumb

    //works but you have to hover to change
    //rules.style.background = 'red';
    
    //try to delete the rule and read. same problem
    //ss.deleteRule(2);
    //ss.insertRule('::-webkit-scrollbar-thumb {background: red}', 0);

    // delete the red rule in hopes it will turn gray. Nope
    console.log(ss.rules);
    ss.deleteRule(5);
    console.log(ss.rules);
//});