I’ve user something like this before on my site (Read-Only link) for custom CSS scrollbars (there are directions in the CSS as well, keep in mind this will only render on the published site, not in the Designer):
<style>
/*change the thinkness of the scrollbar here*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/*add a shadow to the scrollbar here*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/*this is the little scrolly dealio in the bar*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #4353ff;
height: 3px;
}
/*nobody needs this little scrollbar corner, I mean really, get rid of it haha*/
::-webkit-scrollbar-corner { display: none; height: 0px; width: 0px; }
</style>
Not sure if you’ll be able to get everything exactly designed as you have it but can at least get close.