In an effort to create a more modern looking scrollbar (like the one you see on YouTube.com), I made a few tweaks to my own website, like you see here:
The CSS below will give you the exact results you see in the sample, but you can adjust all of these to match the look and feel you’re after.
/* Custom Scrollbar */
body {
overflow: overlay;
}
::-webkit-scrollbar {
width: 1.3em;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 10px 10px transparent;
border: solid 8px transparent;
margin: 10px;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 10px 10px #ccc;
border: solid 8px transparent;
border-radius: 100vw;
min-height: 100px;
}
The “scrollbar” controls the overall width.
The “scrollbar track” controls the track the scrollbar glides along.
The “scrollbar thumb” is the handle that the user drags.
There may be compatibility issues with different browsers, so be sure to test! There is debate that this isn’t good UX practice, so simple is probably best!
