YouTube Style Custom Scrollbar

Create a modern style scrollbar.

In an effort to create a more modern looking scrollbar (like the one you see on, I made a few tweaks to my own website, like you see here:

The scrollbar on my site,

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!

Kyle Van Deusen

Co-founder of The Admin Bar Community, owner of OGAL Web Design, and a GeneratePress & GenerateBlocks enthusiast.

For official support, please visit the forums for GeneratePress or GenerateBlocks

If you're looking to have a website built with GeneratePress & GenerateBlocks, then visit my agency website.

Leave a Comment