pc版微信内置浏览器,滚动条兼容问题
发布于 3 年前 作者 junding 1949 次浏览 来自 分享

使用pc版微信内置浏览器打开公司后台管理系统,表格横向滚动条出现了三秒左右就隐藏了,影响表格横向滚动查看更多数据;

  1. 可点击鼠标滚动齿轮进行横向滚动;
  2. 通过以下样式重绘滚动条;
/* 手动设置滚动条样式.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;
}
回到顶部