css改写滚动条样式 + antd-table scroll:x 和scroll:y 属性不生效

最近在写项目时使用antd来作为组件库，但是需要更改默认样式，所以在一点点改写样式，遇到两个坑记录一下

问题一：加了列宽不生效并且列名和列值不对齐的情况

设置的列宽为110px但是并不生效

解决办法：

正确高列宽生效方法为设置scroll:x的值为列宽总和

 scroll={{
          x: dataList.length > 0 ? 660 : false,
          y: dataList.length > 0 ? 315 : false,
        }}

问题二：x轴滚动条不出现

至于滚动条不显示的原因是我给滚动条重写了css样式，但只设置了垂直滚动条宽度没有设置水平滚动条高度……
正确设置滚动条宽高的方法是在:-webkit-scrollbar属性里同时设置宽高

// 滚动条
  .ant-table-body::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
  }

关于滚动条的构成和重写

然后我们再来好好看一下滚动条的构成和样式：

1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。
2、scrollbar corner为横向和竖向的交叉角区域
3、resize用来设置滚动条的交汇处上用于拖动调整元素大小的小控件

组成结构图如下：

一旦发现滚动条的自定义样式，浏览器的默认样式设置将会失效，只使用在css定义的样式。也就意味值不能单独只设置scrollbar button或scrollbar track。

-webkit-scrollbar /* 滚动条整体部分，重置时必须要设置 /
-webkit-scrollbar-button / 滚动条的轨道的两端按钮 /
-webkit-scrollbar-track / 滚动条的轨道（包含thumb和trace-piece）/
-webkit-scrollbar-track-piece / 轨道中下方块的上下(左右)部分*/
-webkit-scrollbar-thumb /滚动条里面的小方块/
-webkit-scrollbar-corner /* 垂直和水平的交叉角 */
-webkit-resize // 滚动条的交汇处上用于拖动调整元素大小的小控件 */

可以结合以下伪类进行设置（不同的操作系统浏览器滚动条可能不一样，所有可以根据下面伪类来设置）：

:horizontal 水平方向的track、track-piect、thumb
:vertica 垂直方向的track、track-piect、thumb
:decrement 向上和向左按钮的button、向上或向左的track-piece
:increment 向下和向右按钮的button、向下和向右的track-piece
:start 适用于buttons和track pieces,对象（buttons 或 trace piece）是否放在滑块的前面
:end 适用于buttons和track pieces,对象（buttons 或 trace piece）是否放在滑块的后面
:double-button 适用于buttons和track pieces，轨道结束的位置是否是一对按钮
:single-button 适用于buttons和track pieces，轨道结束的位置是否是一个按钮
:no-button 适用于track pieces，轨道结束的位置没有按钮
:corner-present 适用于所有scrollbar,滚动条的角落是否存在
:window-inactive 适用于所有scrollbar,包含滚动条的区域，焦点不在该窗口的时候
:enabled, :disabled, :hover , :active 这些伪类同样适用

下面贴一下我改写的antd滚动条样式吧

.ant-table-cell-scrollbar:not([rowspan]) {
    box-shadow: 0 1px 0 1px #262335;
  }
  // 滚动条
  .ant-table-body::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
  }
  .ant-table-body::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: linear-gradient(270deg, #64e6c0 0%, #687ff9 100%);
  }
  .ant-table-body::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #262335;
  }
  .ant-table-body::-webkit-scrollbar-corner{
   /* 垂直和水平的交叉角 */
   background: #262335
  }