如何实现自定义滚动条与内容之间的永久可见间距？

这个问题其实是因为overflow: scroll容器的padding是包含在滚动视口内的——也就是说，内容会填充到padding区域，只有当内容完全滚动到超出容器的内容高度/宽度时，padding才会露出来。要让间距始终可见，我们需要把这个间距放到内容的外边距上，而不是容器的内边距。

具体修改方案： #

1. 移除外部容器#content的padding-bottom（如果需要左右间距也一样，不要用容器的padding）
2. 给内部元素#inner添加margin-right和margin-bottom（对应横向和纵向滚动的间距），这样这些外边距会被包含在滚动区域内，无论怎么滚动，内容和滚动条之间的间距都会始终存在。

修改后的完整代码如下：

#content { 
  width: 600px; 
  height: 400px; 
  margin: 0; 
  padding: 0; 
  overflow: scroll; 
  background: white; 
}
#inner { 
  height: 700px; 
  width: 800px; 
  background-color: red; 
  /* 添加右侧和底部的间距，根据需求调整数值 */
  margin-right: 20px; 
  margin-bottom: 20px; 
}
/* 滚动条样式保持不变 */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background-color: #04246a; border-radius: 30px; }
::-webkit-scrollbar-button { width: 0; height: 0; display: none; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.15); }

<div id="content">
  <div id="inner">Inner content</div>
</div>

额外说明： #

如果需要内容和容器的左、上边缘也保持间距，直接给#inner添加margin-left和margin-top即可。这种方式的核心是利用内容的外边距来创建间距，因为外边距会被包含在滚动容器的滚动区域中，不会被内容覆盖，所以能始终保持可见。

内容的提问来源于stack exchange，提问作者Renaud is Not Bill Gates