<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>1</title>
<style media="screen">
body.a::-webkit-scrollbar {
background: silver;
}
body.b::-webkit-scrollbar {
background: red;
}
body::-webkit-scrollbar-thumb{
background: black;
}
</style>
</head>
<body class="b">
<div style="height: 3000px">ed</div>
<script type="text/javascript">
body = document.getElementsByTagName('body')[0]
window.onscroll = () => {
var scroll = window.pageYOffset;
if (scroll >= 800){
body.classList.add("b");
body.classList.remove("a");
} else if (scroll <= 800){
body.classList.add("a");
body.classList.remove("b");
}
}
</script>
</body>
</html>
Кое-как работает, но только если навести после мышку на scroll-bar и не все браузеры поддерживают webkit-scrollbar
caniuse . Надеюсь чемто помог.