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

Question

我有这个制作 webkit 滚动条的 css 代码。

::-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. 检测到问题后，用户必须精确移动鼠标才能将光标定位在滚动条上。如果使用非标准的、较窄的滚动条，这个动作的难度会更大。
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;
}