滚动条样式修改

/*滚动条整体样式*/
::-webkit-scrollbar {
  /*高宽分别对应横竖滚动条的尺寸*/
  width: 4px;
  height:4px;
}
/*滚动条里面滑块*/
::-webkit-scrollbar-thumb {
  background: #465880;
}

/*垂直轨道上的滑块样式*/
::-webkit-scrollbar-thumb:vertical {
    background-color: #c0cedc;
    border-radius: 6px;
    outline: 2px solid #fff;
    outline-offset: -2px;
    border: 2px solid #fff;
}
/*水平轨道上的滑块样式*/
::-webkit-scrollbar-thumb:horizontal {
    background-color: #c0cedc;
    border-radius: 6px;
    outline: 2px solid #fff;
    outline-offset: -2px;
    border: 2px solid #fff;
}

/*滚动条的滚动轨道样式*/
::-webkit-scrollbar-track-piece {
    background-color: #fff;
    /* 滚动条的背景颜色 */
    border-radius: 6px;
    /* 滚动条的圆角宽度 */
}


/*在前面加了：hover后，在出现了滚动条时，只有鼠标悬浮才会出现*/

:hover::-webkit-scrollbar-track-piece {
    background-color: #fff;
    /* 滚动条的背景颜色 */
    border-radius: 6px;
    /* 滚动条的圆角宽度 */
}

:hover::-webkit-scrollbar-thumb:vertical {
    background-color: #c0cecc;
}

:hover::-webkit-scrollbar-thumb:horizontal {
    background-color: #c0cecc;
}