custom-scrollbar-changing-style.html

<!DOCTYPE html>
<style>
::-webkit-scrollbar {
    height: 10px;
    width: 10px
}
::-webkit-scrollbar-thumb {
    background: rgba(255,0,0,0.8);
}
html {
    overflow-y: scroll;
}
</style>
<div style="height:700px"></div>
<script src="../resources/run-after-layout-and-paint.js"></script>
<script>
var styleElement = document.createElement("style");
var sheet = document.head.appendChild(styleElement).sheet;
function addRule(selector, css){
    var propText = Object.keys(css).map(function(p){
        return p+":"+css[p]
    }).join(";");
    sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length);
};
runAfterLayoutAndPaint(function() {
    addRule("::-webkit-scrollbar-thumb", {background: "rgba(13,53,178,0.8)",});
}, true);
</script>

chromium/third_party/blink/web_tests/scrollbars/custom-scrollbar-changing-style.html