How can I move my scrollbar away from the edge? - html

Question

I'm still fairly new to HTML and CSS.
Does anyone know how I can move my scroll bar just a few pixels to the left, away from the edge?
This is what it currently looks like:
Current scroll bar
And this is the CSS code I'm working with:
::-webkit-scrollbar {
width: 7px;
height: 0px;
right: 3px
}
::-webkit-scrollbar-button {
width: 10px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: #FFFFFF;
border: 5px none;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #FFFFFF;
}
::-webkit-scrollbar-thumb:active {
background: #FFFFFF;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
border: 5px none;
border-radius: 2px;
}
::-webkit-scrollbar-track:hover {
background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-track:active {
background: #FFFFFF;
}
::-webkit-scrollbar-corner {
background: #FFFFFF;
}

Answer 1

There's a trick.
Set margin-right to the parent element.
body {
background-color: grey;
}
.container-wrapper {
border: 1px solid blue;
margin-bottom: 24px;
}
.container {
border: 1px solid red;
height: 100px;
overflow-y: auto;
margin-right: 24px;
}
::-webkit-scrollbar {
width: 7px;
height: 0px;
right: 3px;
}
::-webkit-scrollbar-button {
width: 10px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: #FFFFFF;
border: 5px none;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #FFFFFF;
}
::-webkit-scrollbar-thumb:active {
background: #FFFFFF;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
border: 5px none;
border-radius: 2px;
}
::-webkit-scrollbar-track:hover {
background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-track:active {
background: #FFFFFF;
}
::-webkit-scrollbar-corner {
background: #FFFFFF;
}
<div class="container-wrapper">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut nibh sit amet nisl semper condimentum ac a lectus. Mauris volutpat aliquet justo, consequat scelerisque enim laoreet in. In nibh nisi, ultricies eget augue imperdiet, blandit ultricies lacus.
Aenean turpis ex, interdum sit amet ante quis, malesuada maximus quam. Pellentesque venenatis mi eu risus mollis sagittis. Nulla facilisi. Pellentesque consectetur sagittis turpis. Maecenas eu neque scelerisque felis faucibus pellentesque. Aliquam
id mauris in lectus tincidunt aliquet. In imperdiet lacus et lorem iaculis, nec vulputate velit efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sit amet metus arcu. Quisque id purus tortor. Nullam
vitae molestie augue, et varius orci. Aliquam erat volutpat. Suspendisse commodo quam id arcu condimentum, vitae tempor quam auctor. Aliquam sit amet bibendum dolor. Fusce maximus eleifend velit, at faucibus erat lacinia eget. Cras eget nibh nec magna
gravida dictum. Aliquam vehicula erat in pretium imperdiet. Aenean id felis in enim dignissim iaculis. Nam vel pulvinar quam. Vestibulum quis mauris hendrerit, efficitur libero et, accumsan nisl. Proin hendrerit, ligula in finibus iaculis, nisi ligula
rhoncus tortor, quis commodo sem neque non sem. Nulla sollicitudin nulla ut nibh rutrum, in hendrerit magna maximus. Quisque commodo pulvinar ipsum, nec porta magna ullamcorper ac. Donec efficitur elit eget lorem dictum, quis pretium leo congue. Aliquam
dictum leo vel tortor dapibus, sit amet viverra leo efficitur. Fusce ultricies sem quis accumsan dignissim. Phasellus aliquam nisl a malesuada tristique. Ut sed diam nec lectus pharetra gravida. Nulla vel dolor at est auctor eleifend ac nec arcu.
Suspendisse eget lobortis lacus. Nunc lobortis libero lectus, sed luctus erat eleifend sit amet. In at blandit leo. Curabitur congue mauris at ante interdum molestie. Nullam dignissim elementum purus id tempor. Donec id nisi a leo sollicitudin convallis.
Nulla quis suscipit lacus. Nam vitae ante quis nulla dignissim volutpat. Morbi nibh mi, placerat ac eleifend ac, malesuada nec ligula. Morbi finibus nibh augue, dapibus ultrices purus pretium ac. Quisque id vulputate sem, eu suscipit neque. Nunc et
augue at odio facilisis varius. Vivamus fermentum est ipsum, a tincidunt augue luctus at. Maecenas vel bibendum nunc. Quisque vitae sapien sit amet lorem gravida vehicula. Maecenas ac neque vestibulum, aliquam quam non, sagittis tellus. Nulla urna
risus, dictum sit amet ultricies ut, interdum nec ante.
</div>
</div>
If you remove borders, it looks like the scrollbar is pushed away from the right side of the viewport.
body {
background-color: grey;
}
.container-wrapper {
margin-bottom: 24px;
}
.container {
height: 100px;
overflow-y: auto;
margin-right: 24px;
}
::-webkit-scrollbar {
width: 7px;
height: 0px;
right: 3px;
}
::-webkit-scrollbar-button {
width: 10px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: #FFFFFF;
border: 5px none;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #FFFFFF;
}
::-webkit-scrollbar-thumb:active {
background: #FFFFFF;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
border: 5px none;
border-radius: 2px;
}
::-webkit-scrollbar-track:hover {
background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-track:active {
background: #FFFFFF;
}
::-webkit-scrollbar-corner {
background: #FFFFFF;
}
<div class="container-wrapper">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut nibh sit amet nisl semper condimentum ac a lectus. Mauris volutpat aliquet justo, consequat scelerisque enim laoreet in. In nibh nisi, ultricies eget augue imperdiet, blandit ultricies lacus.
Aenean turpis ex, interdum sit amet ante quis, malesuada maximus quam. Pellentesque venenatis mi eu risus mollis sagittis. Nulla facilisi. Pellentesque consectetur sagittis turpis. Maecenas eu neque scelerisque felis faucibus pellentesque. Aliquam
id mauris in lectus tincidunt aliquet. In imperdiet lacus et lorem iaculis, nec vulputate velit efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sit amet metus arcu. Quisque id purus tortor. Nullam
vitae molestie augue, et varius orci. Aliquam erat volutpat. Suspendisse commodo quam id arcu condimentum, vitae tempor quam auctor. Aliquam sit amet bibendum dolor. Fusce maximus eleifend velit, at faucibus erat lacinia eget. Cras eget nibh nec magna
gravida dictum. Aliquam vehicula erat in pretium imperdiet. Aenean id felis in enim dignissim iaculis. Nam vel pulvinar quam. Vestibulum quis mauris hendrerit, efficitur libero et, accumsan nisl. Proin hendrerit, ligula in finibus iaculis, nisi ligula
rhoncus tortor, quis commodo sem neque non sem. Nulla sollicitudin nulla ut nibh rutrum, in hendrerit magna maximus. Quisque commodo pulvinar ipsum, nec porta magna ullamcorper ac. Donec efficitur elit eget lorem dictum, quis pretium leo congue. Aliquam
dictum leo vel tortor dapibus, sit amet viverra leo efficitur. Fusce ultricies sem quis accumsan dignissim. Phasellus aliquam nisl a malesuada tristique. Ut sed diam nec lectus pharetra gravida. Nulla vel dolor at est auctor eleifend ac nec arcu.
Suspendisse eget lobortis lacus. Nunc lobortis libero lectus, sed luctus erat eleifend sit amet. In at blandit leo. Curabitur congue mauris at ante interdum molestie. Nullam dignissim elementum purus id tempor. Donec id nisi a leo sollicitudin convallis.
Nulla quis suscipit lacus. Nam vitae ante quis nulla dignissim volutpat. Morbi nibh mi, placerat ac eleifend ac, malesuada nec ligula. Morbi finibus nibh augue, dapibus ultrices purus pretium ac. Quisque id vulputate sem, eu suscipit neque. Nunc et
augue at odio facilisis varius. Vivamus fermentum est ipsum, a tincidunt augue luctus at. Maecenas vel bibendum nunc. Quisque vitae sapien sit amet lorem gravida vehicula. Maecenas ac neque vestibulum, aliquam quam non, sagittis tellus. Nulla urna
risus, dictum sit amet ultricies ut, interdum nec ante.
</div>
</div>

Answer 2

There are different ways of solving this issue. However, I guess none of them just work exactly as you would expect.
The easiest way to solve your issue would be to give your body absolute positioning:
html {
overflow: auto;
background: blue;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow-y: scroll;
overflow-x: hidden;
}
Edit: As pointed out in the other answer you could also use margin to imitate this behavior.
You could also give your scrollbar the same border color as the background, e.g.
body {
scrollbar-width: thin;
scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
background: var(--scrollbarBG);
border-right: 15px solid blue;
}
body::-webkit-scrollbar-thumb {
background-color: var(--thumbBG) ;
border: 0px solid blue;
border-right: 15px solid blue;
}
Find more information about the Webkit Scrollbar at https://css-tricks.com/custom-scrollbars-in-webkit/