如何通过CSS缩短垂直滚动条轨道长度以避开容器圆角？

我有一个带圆角的容器，内部包含垂直滚动元素，呈现出“窗口查看滚动内容”的效果。我想保留垂直滚动条，但当前滚动条高度和容器一致，两端会覆盖容器的圆角。我希望把滚动条轨道缩短约20px，让容器的圆角保持可见。用::-webkit-scrollbar能设置很多属性，但好像没有修改轨道长度/比例的选项，请问这个需求能实现吗？

实现方案 #

方法一：容器嵌套（兼容性好） #

通过两层容器分离“圆角展示”和“滚动功能”，是最稳妥的解决方式：

• 外层容器：负责显示圆角、边框和阴影，设置overflow: hidden裁剪内部内容，确保圆角不会被滚动条覆盖；
• 内层容器：承载滚动内容，添加上下内边距（比如20px），让滚动条轨道自然缩短，避开外层的圆角区域。

修改后的完整代码：

<style>
/* 外层容器：控制圆角、边框和裁剪 */
.tablescroll-wrapper {
  max-width: 946px;
  height: calc(100vh - 200px);
  margin: auto;
  border: 1px solid #900;
  border-radius: 15px;
  box-shadow: inset 5px 5px 3px #888;
  overflow: hidden; /* 关键：裁剪内部滚动条，露出圆角 */
}

/* 内层容器：负责滚动逻辑 */
.tablescroll {
  height: 100%;
  background-color: #ccc;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 20px 0; /* 上下内边距让滚动条轨道缩短 */
}

table.enthcompare {
  position: static;
  width: 926px;
  border-collapse: separate;
  border-spacing: 10px 0px;
  vertical-align: top;
  margin: 0 auto;
}
</style>

<div class="tablescroll-wrapper">
  <div class="tablescroll">
    <table class="enthcompare">
      <tr>
        <td>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
          blah<br>
        </td>
      </tr>
    </table>
  </div>
</div>

方法二：webkit滚动条属性（仅兼容Chrome/Safari） #

如果只需要适配webkit内核浏览器，可以直接给滚动条轨道设置上下外边距，模拟轨道缩短的效果：

.tablescroll::-webkit-scrollbar {
  width: 10px; /* 设置滚动条宽度 */
}

.tablescroll::-webkit-scrollbar-track {
  margin: 20px 0; /* 上下外边距让轨道缩短 */
  border-radius: 8px;
  background-color: #ccc;
}

.tablescroll::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #888;
}

这种方法不用修改HTML结构，但仅支持webkit内核浏览器，适合特定场景。

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