css 更改浏览器默认滚动条样式

如果只想更改main-sidebar class下的滚动条样式可设置为

/*左侧菜单栏滚动条样式*/
 .main-sidebar::-webkit-scrollbar{
   width:8px;
   height:8px;
 }
 .main-sidebar::-webkit-scrollbar-track{
   background: rgba(43,70,109,1);
   border-radius:8px;
 }
 .main-sidebar::-webkit-scrollbar-track-piece{/*内层轨道，滚动条中间部分（位置4）*/
   border-radius: 2px 2px 0px 0px;
 }
 .main-sidebar::-webkit-scrollbar-thumb{
   background: #6E8EBA;
   border-radius:6px;
 }
 .main-sidebar::-webkit-scrollbar-thumb:hover{
   background: #5176AA;
 }
 .main-sidebar::-webkit-scrollbar-corner{
   background: #f6f6f6;
 }

更改全局的滚动条样式:

/*左侧菜单栏滚动条样式*/
::-webkit-scrollbar{
  width:8px;
  height:8px;
}
::-webkit-scrollbar-track{
  /*background: rgba(43,70,109,1);*/
  border-radius:8px;
}
::-webkit-scrollbar-track-piece{/*内层轨道，滚动条中间部分（位置4）*/
  border-radius: 2px 2px 0px 0px;
}
::-webkit-scrollbar-thumb{
  background: #6E8EBA;
  border-radius:6px;
}
::-webkit-scrollbar-thumb:hover{
  background: #5176AA;
}
::-webkit-scrollbar-corner{
  background: #f6f6f6;
}