css修改浏览器原生滚动条样式

浏览器的自带滚动条确实很难看，虽然可以重载css样式，但由于各个浏览器并不互相兼容，那么就要写多个样式并且不能保证外观统一（火狐貌似无法修改滚动条样式的），如下

// IE浏览器
* {
  //三角箭头的颜色
  scrollbar-arrow-color: #c0c4cc;
  //滚动条滑块按钮的颜色*/
  scrollbar-face-color: #a2a2a3;
  //滚动条整体颜色*/
  scrollbar-highlight-color: #a2a2a3;
  //滚动条阴影*/
  scrollbar-shadow-color: #a2a2a3;
  //滚动条轨道颜色*/
  scrollbar-track-color: #f4f4f5;
  //滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色
  scrollbar-3dlight-color: #a2a2a3;
  //滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色
  scrollbar-darkshadow-color: #a2a2a3;
  //滚动条基准颜色
  scrollbar-base-color: #f4f4f5;
  scroll-padding-block: 6px;
}

// 谷歌浏览器
//  https://www.cnblogs.com/that-is-ok/p/10757282.html
//  https://www.jianshu.com/p/c2addb233acd
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}
/* Track */
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;*/
}
/* Handle */
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 12px;
  border: 5px solid rgba(255, 255, 255, 1);
  background: lightgray;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: darkgray;
}
// 如果想鼠标进入某个控件才显示滚动条的话，可以参考下面的代码写
// IE下隐藏
//.el-table__body-wrapper,
//.el-menu {
//  -ms-overflow-style: none;
//}

//.el-table__body-wrapper:hover,
//.el-menu:hover {
//  -ms-overflow-style: auto;
//}
// Chrome下隐藏
// .el-menu::-webkit-scrollbar,
// .el-table__body-wrapper::-webkit-scrollbar {
//   display: none;
// }
// .el-menu:hover::-webkit-scrollbar,
// .el-table__body-wrapper:hover::-webkit-scrollbar {
//   display: block;
// }

效果

• Chrome

• IE

参考链接

CSS 滚动条样式【兼容chrome、Firefox、IE】
Css实现漂亮的滚动条样式
css滚动条样式重写（兼容ie和谷歌）