鼠标移入滚动条加粗

有时接到UI设计需要鼠标移入使滚动条加粗，但无论怎样设置，彷佛不起作用，原因是滚动条是由边框和背景组成，所以通过设置border-color: transparent 可以实现，别忘了加上background-clip: padding-box 它可以使背景最大到达padding外边缘，同时加粗:hover之后的边框宽度，间接实现了鼠标移入使滚动条加粗，核心代码如下：

.divScroll {
  width: 100%;
  height: calc(100vh - 100px);
  overflow-x: auto;

  /* 自定义整个滚动条 */
  &::-webkit-scrollbar {
    height: 6px;
  }

  /* 自定义滚动条轨道 */
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  /* 自定义滚动条的滑块（thumb） */
  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    border-style: solid;
    border-color: transparent;
    border-width: 1px;
    background: #C9CDD4;
    background-clip: padding-box; //这一句是必要的
  }

  /* 当滑块悬停或活动时自定义滚动条的滑块 */
  &::-webkit-scrollbar-thumb:hover {
    border-radius: 4px;
    border-style: solid;
    border-color: #C9CDD4;
    border-width: 6px;
    background: #C9CDD4;
  }
}