鼠标悬停改变滚动条样式（高度、宽度、颜色）

• 核心代码：

       ::-webkit-scrollbar{ /*滚动条整体样式*/
            height: 9px !important; /*高宽分别对应横竖滚动条的尺寸*/
            width: 9px !important;
        }

        ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
            border-radius: 0;
            border-style: dashed;
            background-color: rgba(157, 165, 183, 0.4);
            border-color: transparent;
            border-width: 1.5px;
            background-clip: padding-box;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(157, 165, 183, 0.7)
        }

::-webkit-scrollbar-track { /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(240, 240, 240, 0) ;
  border-radius: 0 ;
  // background: rgba(240, 240, 240, 0.5) ;
  background: rgba(240, 240, 240, 0) ;
  cursor: pointer ;
}

• 自定义滚动条的宽度

// 自定义滚动条样式，有必要的话可以完善这个样式进行使用。
.y-scrollbar-width-7 {
  ::-webkit-scrollbar { /*滚动条整体样式*/
    width: 12px ; /*高宽分别对应横竖滚动条的尺寸*/
    height: 12px ;
  }
  ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-width: 2.5px;
  }
}

参考：
https://blog.csdn.net/dKnightL/article/details/88317356