鼠标划入滚动条变大

需求

滚动条太大影响美观，缩小滚动条后不方便操作，希望鼠标hover的情况下变大。

实现

通过设置一个透明变边框 透明阴影（消除阴影影响）然后hover设置一个不透明的颜色实现。

/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */
.control ::v-deep .ant-table-scroll ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

/* 定义滑块 内阴影+圆角 */
::v-deep ::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  -webkit-box-shadow: inset 0 0 0px rgba(157, 165, 183, 0.4);
  background-color: rgba(157, 165, 183, 0.4);
  border: 2px solid transparent;
  border-radius: 10px;
}
::v-deep ::-webkit-scrollbar-thumb:hover {
  -webkit-box-shadow: inset 0 0 0px rgba(157, 165, 183, 0.7);
  background: rgba(157, 165, 183, 0.7);
}

以下是无关代码

/* 定义滚动条轨道 内阴影+圆角 */
::v-deep ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0px white;
  border-radius: 3px;
  background: white;
}