pc版微信内置浏览器,滚动条兼容问题
使用pc版微信内置浏览器打开公司后台管理系统,表格横向滚动条出现了三秒左右就隐藏了,影响表格横向滚动查看更多数据;
- 可点击鼠标滚动齿轮进行横向滚动;
- 通过以下样式重绘滚动条;
/* 手动设置滚动条样式.el-table--scrollable-x .el-table__body-wrapper为设置滚动条溢出的DIV类名:*/
.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track-piece {
background-color: #f1f1f1;
border-left: 1px solid #e6ebf5;
}
/* -ms代表IE浏览器私有属性 -moz-代表firefox浏览器私有属性 -webkit代表chrome、safari私有属性 滚动条整体部分,可以设置宽度等 */
.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
width: 5px;
height: 13px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
/* 滚动条的滑块按钮 */
.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
// 规定背景的绘制区域 padding-box:背景被裁剪到内边距框
background-clip: padding-box;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
min-height: 28px;
}
.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
background-color: #787878;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}