Put some space between webkit scrollbar and screen edge

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?

Phia

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;
}

Estaestablish

Yeah, it works. I will have to change a bit in order to fit the rest of the design, but it works. Thank you very much :D – Phia

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:

1. The user will want to scroll the content which will unconsciously translate to hitting the edge of the screen with the cursor.
2. This unconscious scrolling action will fail, breaking the user's focus on the content.
3. The user will look toward the cursor to see what's wrong.
4. 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.
5. 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.

Forrester

OP asked how to do it, not if he should. – Hemiplegia

@RaviMattar OP might not be aware of why it's a bad idea, which is why "what you're trying to do is a bad idea"-type answers are legitimate. – Forrester

Answer 3

The best way that I found to do this without making it position absolute because its not always going to be in the same place so you can use a border-right on it and then that will create a gap in there also, you can also make it transparent if your background is that also.

    border-right: 7px solid rgba(0, 0, 0, 0.01);

Fabria

Answer 4

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;
}

Stricture