在webkit滚动条和屏幕边缘之间留出一些空间

Question

我有一个css代码，它制作了一个webkit滚动条。

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

这将使滚动条正好位于屏幕边缘旁边。有什么方法可以在屏幕边缘和滚动条之间放置一些空间吗？

Answer 1

这里有一个有趣的解决方案来解决我认为您正在谈论的问题；他们实际上在身体元素上加了填充/位置：

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

Answer 2

如果不这样做，您将破坏可用性。

如果可滚动区域延伸到屏幕边缘，则滚动条也必须位于屏幕边缘。通过这种方式，用户可以简单地用光标点击屏幕边缘并使用滚动条。这个动作不需要视觉注意或精确定位；这是一个简单、容易的动作。

如果滚动条不在屏幕边缘，将发生以下情况：

1. 用户将想要滚动内容，该内容将无意识地转化为用光标敲击屏幕边缘
2. 这种无意识的滚动操作将失败，破坏用户对内容的关注
3. 用户会朝着光标看，看看哪里出了问题
4. 在检测到问题后，用户将不得不精确地移动鼠标以将光标定位在滚动条上。如果你使用非标准的、更窄的滚动条，这个动作的难度会更大
5. 用户将点击并拖动，滚动内容并将焦点返回到内容

即使这一切需要一秒钟的时间，它仍然非常烦人，完全没有必要，而且，我想，很可能会让用户把他们的业务转移到其他地方。

Answer 3

更改可滚动元素的宽度。例如

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