工作中使用ant design vue表格时，使用了表格的scroll对大量的数据和数据列进行数据滚动显示。

:scroll="{ x: 1500, y: 300 }"

需要修改默认的滚动条样式与UI设计图风格一致，主要代码如下：

.ant-table-body {
    // 设置滚动条的宽高
    &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    // 设置滚动条的圆角和颜色
    &::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background: #ccc;
    }
    // 设置滚动条轨道的背景色
    &::-webkit-scrollbar-track {
        border-radius: 5px;
        background: transparent;
    }
    // 设置边角位置的圆角与背景色
    &::-webkit-scrollbar-corner {
        border-radius: 5px;
        background: transparent;
    }
}

此时滚动条的样式设置完成，但是由于表头也有占位符，此时表头会显得比表体窄了一点，也就是出现了白边。

隐藏表头占位符之后表头变宽，但是在y轴数据量不够时，表体又会显得比表头窄了一点，窄的宽度就是之前我们设置的滚动条宽度。

那么我们手动将表头右侧添加一个滚动条宽度的边距即可达到视觉上的表头表体上下齐平效果。

.ant-table-header{
  // 隐藏表头占位符
  overflow-y: hidden !important;
  // 同步滚动条宽度的边距
  margin-right: 8px;
}