css滚动条悬停放大宽度、改变颜色

**需求:**滚动条普通状态下宽度为12px，颜色半透明；悬停状态下宽度为6px，颜色不透明。

**解决方案:**滚动条由背景色和边框共同组成，颜色可通过改变背景色实现，宽度需要通过设置border宽度并且运用background-clip属性共同实现。当background-clip为padding-box时，背景色会被border遮挡；当background-clip为border-box时，背景色不会被border遮挡，通过控制border的遮挡状态来实现滚动条宽度在视觉上的变化。

普通状态

::-webkit-scrollbar {
    width: 12px !important;
  }

::-webkit-scrollbar-thumb {
	// 普通状态下宽度
    border-radius: 10px;
   	border-style: dashed;
    border-color: transparent;
    border-width: 3px;
    background-clip: padding-box;
    // 普通状态下颜色
    background-color: rgba(157, 165, 183, 0.5);
}

悬停状态

::-webkit-scrollbar-thumb:hover {
	// 悬停状态宽度
    background-clip: border-box;
    // 悬停状态颜色
    background: rgba(157, 165, 183, 1);
}