Put some space between webkit scrollbar and screen edge - css

Question

I've got this css code that makes a webkit scrollbar.
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
This will make a scrollbar that will be right next to the screen edge. Is there any way that I can put some space between the screen edge and the scrollbar?

Answer 1

Here is an interesting solution to what I think you are talking about; they actually put padding/position on the body element:
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow-y: scroll;
overflow-x: hidden;
}

Answer 2

Do not do this, you will be murdering usability.
If a scrollable region extends to the edge of the screen, the scrollbar must also be at the edge of the screen. This way, the user can simply hit the edge of the screen with their cursor and use the scrollbar. This action doesn't require visual attention or precise positioning; it's a simple, easy movement.
If the scrollbar is not at the edge of the screen, the following will happen:
The user will want to scroll the content which will unconsciously translate to hitting the edge of the screen with the cursor.
This unconscious scrolling action will fail, breaking the user's focus on the content.
The user will look toward the cursor to see what's wrong.
After detecting the problem, the user will have to make a precise movement of the mouse to position the cursor over the scrollbar. The difficulty of this movement is even greater if you use a non-standard, narrower scrollbar.
The user will click and drag, scrolling the content and returning their focus to it.
Even if all this takes a second, it's still very annoying and completely unnecessary, and, I imagine, quite likely to make the user take their business elsewhere.

Answer 3

Change the width of the scrollable element. For instance...
#div_content {
width: calc(100% - 20px);
}
That way, the other elements of the page are unaffected. For instance.
<div id="div_header">Welcome</div>
<div id="div_content">
Scrollable content goes here.
</div>
<div id="div_footer">©2015 by Whomever</div>
Sample CSS...
#div_header {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100px;
}
#div_content {
position: absolute;
left: 0;
top: 100px;
width: calc(100% - 20px);
height: calc(100% - 140px);
padding: 50px;
overflow-x: hidden;
overflow-y: auto;
}
#div_content::-webkit-scrollbar {
-webkit-appearance: none;
}
#div_content::-webkit-scrollbar:vertical {
width: 5px;
}
#div_content::-webkit-scrollbar:horizontal {
height: 5px;
}
#div_content::-webkit-scrollbar-thumb {
border-radius: 8px;
border: none;
background-color: #404040;
}
#div_footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
}