Skip to content

Instantly share code, notes, and snippets.

@flekschas

flekschas/index.html

Last active April 19, 2025 20:28
Show Gist options
  • Save flekschas/a817fd1a67aaca511964 to your computer and use it in GitHub Desktop.
Save flekschas/a817fd1a67aaca511964 to your computer and use it in GitHub Desktop.
Download ZIP
Custom styled scroll bar with 'margin'
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom scroll bar with 'margin'</title>
</head>
<body>
<div id="content"></div>
</body>
</html>
Raw
style.css
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: scroll;
background: linear-gradient(#f2f2f2, #d9d9d9);
}
#content {
height: 100em;
}
::-webkit-scrollbar {
width: 2em; /* Total width including `border-width` of scrollbar thumb */
height: 0;
}
::-webkit-scrollbar-thumb {
height: 1em;
border: 0.5em solid rgba(0, 0, 0, 0); /* Transparent border together with `background-clip: padding-box` does the trick */
background-clip: padding-box;
-webkit-border-radius: 1em;
background-color: rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.025);
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
@lobarevk
Copy link

lobarevk commented Aug 5, 2022

It works, but how to change width? If I change width to '10px' (or some 'em' to 'px') scrollbar disappears

@bajcsiadel
Copy link

bajcsiadel commented Sep 8, 2022 •
edited
Loading

@lobarevk As mentioned in the comment above, when specifying the width of the scroll bar you should consider the width of border as well. So if you change the width of the scroll bar to px you should also change the width of the border. E.g.

...
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-thumb {
    ...
    border: 2px solid rgba(0, 0, 0, 0); 
    ...
}

In this example the final width of the handle will be 6px (2px+6px+2px = 10px)

@W014ara
Copy link

W014ara commented Apr 15, 2024

@bajcsiadel
Is it possible to create an margin on the right side only while saving the border-radius?

@bajcsiadel
Copy link

@W014ara Unfortunately, I don't know any solution for your problem. You can set a "right margin" by increasing the size of the right border, however, you will lose the roundness.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment