美化滚动条

转载https://blog.csdn.net/weixin_44135807/article/details/101204190

/chrome--------------------------------------------start/
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* Track /
::-webkit-scrollbar-track {
background: rgb(255, 255, 255);
border-radius: 8px;
}
/
Handle /
::-webkit-scrollbar-thumb {
background: rgb(201, 201, 202);
border-radius: 8px;
}
/
Handle on hover /
::-webkit-scrollbar-thumb:hover {
background: rgb(162, 162, 163);
}
.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--------------------------------------------end/
/
IE--------------------------------------------start/
{
/
三角箭头的颜色
/
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;
}
.el-table__body-wrapper,.el-menu{
/IE下隐藏/
-ms-overflow-style:none;
}

.el-table__body-wrapper:hover,.el-menu:hover{
/IE下显示/
-ms-overflow-style:auto;
}
/IE--------------------------------------------end/

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容