如何设置水平滚动条底部间距 避免滚动条贴合容器边框

需求说明 #

需要实现水平滚动条效果满足以下要求：

• 滚动条滑块可见
• 滚动条轨道无背景
• 滚动条不贴容器边框，和容器边框之间保留均匀空隙
  效果参考：
  

原有代码问题 #

• 滚动条轨道设置了白色背景，不符合无背景要求
• 未预留滚动条底部空间，滚动条会紧贴容器底部边框
• 原HTML存在语法错误：<thead>标签未闭合，缺少<tr>包裹单元格，会导致表格渲染异常

修正后完整代码 #

CSS 部分 #

.container {
  padding: 20px;
  /* 额外增加底部内边距，给滚动条留出和边框的空隙 */
  padding-bottom: 12px;
  border-radius: 20px;
  border: 1px solid #e1e1e1;
  margin: 0 60px;
  overflow-x: auto;
  position: relative;
}

/* 定义滚动条尺寸 */
.container::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}

/* 滚动条轨道设为透明，实现无背景效果 */
.container::-webkit-scrollbar-track {
  background: transparent;
}

/* 滚动条滑块样式 */
.container::-webkit-scrollbar-thumb {
  background: #f0f0f0;
  border-radius: 8px;
}

/* 控制滚动条左右边距，和容器内边距匹配，不贴左右边框 */
.container::-webkit-scrollbar-track-piece:start {
  margin-left: 0;
}
.container::-webkit-scrollbar-track-piece:end {
  margin-right: 0;
}

HTML 部分 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="container">
      <table>
        <thead>
          <tr>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
          </tr>
        </thead>
      </table>
    </div>
  </body>
</html>

关键实现逻辑 #

• 无背景轨道：不要给轨道设置任何实色背景，直接用transparent即可，不会出现多余色块
• 底部空隙：通过容器padding-bottom预留空间是兼容性最好的方案，滚动条会自动渲染在padding区域，和容器外边框自然拉开距离，不需要复杂的偏移hack
• 左右空隙：调整track-piece的start/end margin值，和容器左右内边距保持一致，就能实现滚动条长度和内容区域匹配，不会贴到左右圆角边框
• 注：以上webkit前缀写法适用于Chrome、Edge、Safari等webkit内核浏览器，Firefox需要单独用scrollbar-width、scrollbar-color属性适配

内容的提问来源于stack exchange，提问作者kakakakakakakk