在webkit滚动条和屏幕边缘之间放置一些空格

Question

我有这个编写webkit滚动条的css代码。

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

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

Answer 1

Here是我认为你在谈论的一个有趣的解决方案;他们实际上将填充/位置放在body元素上：

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

Answer 2

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

<ion-scroll>

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

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

示例CSS ...

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

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

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

Answer 3

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

如果可滚动区域扩展到屏幕边缘，则滚动条也必须位于屏幕边缘。这样，用户可以简单地用光标击中屏幕的边缘并使用滚动条。此操作不需要视觉注意或精确定位；这是一个简单，轻松的动作。

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

1. 用户将要滚动内容，该内容将在不知不觉中转换为用光标击中屏幕边缘。
2. 这种无意识的滚动操作将失败，从而破坏了用户对内容的关注。
3. 用户将朝着光标看，以找出问题所在。
4. 检测到问题后，用户将必须精确移动鼠标才能将光标定位在滚动条上。如果您使用非标准的，较窄的滚动条，则移动的难度会更大。
5. 用户将单击并拖动，滚动内容并将其焦点返回到它。

即使这需要花费一秒钟的时间，也仍然很烦人并且完全没有必要，而且我认为，很有可能会使用户将其业务转移到其他地方。