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;
}
@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