Here是一个有趣的解决方案，我认为你在谈论什么;他们实际上把padding/position放在body元素上：

body {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    padding: 30px; 
    overflow-y: scroll;
    overflow-x: hidden;
}

不要这样做，你会谋杀可用性。
如果可滚动区域延伸到屏幕边缘，则滚动条也必须位于屏幕边缘。这样，用户可以简单地用光标点击屏幕的边缘并使用滚动条。这个动作不需要视觉上的注意或精确的定位;这是一个简单易行的动作。
如果滚动条不在屏幕边缘，则会发生以下情况：
1.用户想要滚动内容，这将无意识地转化为用光标点击屏幕的边缘。
1.这种无意识的滚动操作将失败，从而破坏用户对内容的关注。
1.用户将看向光标，看看出了什么问题。
1.检测到问题后，用户必须精确移动鼠标，将光标定位在滚动条上。如果使用非标准的、更窄的滚动条，这种移动的难度就更大了。
1.用户将单击并拖动，滚动内容并将焦点返回到它。
即使这一切只需要一秒钟，它仍然非常烦人，完全没有必要，而且，我想，很可能使用户把他们的业务带到其他地方。

**更改可滚动元素的宽度。比如...

#div_content {
    width: calc(100% - 20px);
}

这样，页面的其他元素不受影响。例如：

<div id="div_header">Welcome</div>

<div id="div_content">
    Scrollable content goes here.
</div>

<div id="div_footer">©2015 by Whomever</div>

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

我发现最好的方法是在不使它处于绝对位置的情况下做到这一点，因为它并不总是在同一个地方，所以你可以在它上面使用边框，然后在那里也会创建一个间隙，如果你的背景也是这样，你也可以使它透明。

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