Adding space between custom scrollbar and content - css

Question

I have a custom scrollbar as in the following example, I want to add a space between it and the content, adding padding didn't work in this case, and we only see the padding when we reach the end of the scroll.
The space between the scrollbar and the content should always be visible, but I don't know how to achieve this.
#content {
width: 600px;
height: 400px;
margin: 0;
padding: 0;
overflow: scroll;
background: white;
padding-bottom: 20px;
}
#inner {
height: 700px;
width: 800px;
background-color: red;
}
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-thumb {
background-color: #04246a;
border-radius: 30px;
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.15);
}
<div id="content">
<div id="inner">Inner content</div>
</div>
How can I solve this?

Answer 1

You can try this approach with pseudo-element ::after with position: absolute. To make it effect, you also need to add another wrapper called content-container for keeping content and inner separated.
#content {
width: 600px;
height: 400px;
margin: 0;
padding: 0;
background: white;
position: relative;
}
#content-container {
width: 100%;
height: 100%;
border: 1px solid black;
overflow: scroll;
}
#content::after {
content: "";
position: absolute;
width: calc(100% - 6px); /*6px difference from your custom scrollers (1px is from the border)*/
height: 20px;
bottom: 6px; /*6px difference from your custom scrollers (1px is from the border)*/
left: 0;
background-color: blue;
z-index: 1;
}
#inner {
height: 700px;
width: 800px;
background-color: red;
transform: translateZ(0);
}
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-thumb {
background-color: #04246a;
border-radius: 30px;
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.15);
}
<div id="content">
<div id="content-container">
<div id="inner">Inner content</div>
</div>
</div>
If you want to have the same behavior for both x-axis and y-axis, you can try to apply ::before and ::after together on both sides
#content {
width: 600px;
height: 400px;
margin: 0;
padding: 0;
background: white;
position: relative;
}
#content-container {
width: 100%;
height: 100%;
border: 1px solid black;
overflow: scroll;
}
#content::after {
content: "";
position: absolute;
width: calc(100% - 6px); /*6px difference from your custom scrollers (1px is from the border)*/
height: 20px;
bottom: 6px; /*6px difference from your custom scrollers (1px is from the border)*/
left: 0;
background-color: blue;
z-index: 1;
}
#content::before {
content: "";
position: absolute;
height: calc(100% - 6px);
width: 20px;
top: 0;
right: 6px;
background-color: blue;
z-index: 1;
}
#inner {
height: 700px;
width: 800px;
background-color: red;
transform: translateZ(0);
}
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-thumb {
background-color: #04246a;
border-radius: 30px;
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.15);
}
<div id="content">
<div id="content-container">
<div id="inner">Inner content</div>
</div>
</div>
P/s: I'm using a blue background to differentiate between content and the bottom gap. You can modify it to inherit for using content background color or any color of your choice