custom-scrollbar-adjust-on-inactive-pseudo.html

<!DOCTYPE HTML>
<style>
/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar:window-inactive {
    width: 150px;
    height: 150px;
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4);
    -webkit-border-radius: 1px;
    -webkit-box-shadow: inset 0 0 1px rgba(255,250,0,0.5); 
}
body {
    width: 1000px;
    height: 1000px;
}

div{
    width: 1500px;
    height: 1500px;
}
</style>
<body>
<div></div>
</body>
<script>
document.body.offsetTop;
if (window.testRunner)
    testRunner.setWindowFocus(false);
</script>

chromium/third_party/blink/web_tests/scrollbars/custom-scrollbar-adjust-on-inactive-pseudo.html