Skip to content

Instantly share code, notes, and snippets.

@flekschas

flekschas/index.html

Last active June 15, 2024 10:17
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;
}
@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?

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