直播平台开发,滚动条样式的修改和更换
直播平台开发,滚动条样式的修改和更换实现的相关代码
// 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;
// }
以上就是 直播平台开发,滚动条样式的修改和更换实现的相关代码,更多内容欢迎关注之后的文章