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

Question

我有这个 css 代码，可以制作 webkit 滚动条。

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

这将创建一个滚动条，该滚动条将位于“屏幕边缘旁边”。有什么办法可以在屏幕边缘和滚动条之间放置一些空间吗？

Answer 1

这里

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

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. 用户将单击并拖动，滚动内容并将焦点返回到它。
即使这一切只需要一秒钟，它仍然非常烦人且完全没有必要，而且我想，很可能会让用户将业务转移到其他地方。

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

Answer 4

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