Skip to content

Instantly share code, notes, and snippets.

@flekschas

flekschas/index.html

Last active April 19, 2025 20:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save flekschas/a817fd1a67aaca511964 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
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;
}
@W014ara

W014ara commented Apr 15, 2024

Copy link
Copy Markdown

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

@bajcsiadel

bajcsiadel commented Sep 25, 2024

Copy link
Copy Markdown

@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