直播平台开发，滚动条样式的修改和更换

直播平台开发，滚动条样式的修改和更换实现的相关代码

 

// 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;
// }

​

以上就是 直播平台开发，滚动条样式的修改和更换实现的相关代码，更多内容欢迎关注之后的文章