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

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