bootstrap-table滚动条利用 mCustomScrollbar 插件美化滚动条,完美解决横向滚动条 偏移bug
注意下
bootstrap-table 使用mCustomScrollBar,如果有横向滚动条则 table表头不会 和 内容一起联动
下面是
解决方案:
boostrap-table出现了注册滚动条事件绑定 table 内容 和 表头联动。
下面的就是联动方法:
b.options.showHeader && b.options.height................................
百度一下。找到 mCustomScrollbar 滚动条 滚动事件
$(selector).mCustomScrollbar({
callbacks: {
whileScrolling: function () {
} }
});
顾名思义:当插件滚动条滚动时,触发 bt的header 和 body联动事件
由于 mCustom滚动条 css文件我改过
下面这段代码需要你们自己回归到 f12里自己看。找到对应的 位置。
$(".fixed-table-body>.yzxB_vertical_horizontal>.yzxB_container").css("left").replace("px", "") * -1;
$('#table').on('scroll-body.bs.table', function (e, arg1, arg2) { var a = $("#table").bootstrapTable('getOptions').showHeader; var b = $("#table").bootstrapTable('getOptions').height; var c = $("div.fixed-table-header"); var f = $("#table").bootstrapTable('getOptions').showFooter; var g = $("#table").bootstrapTable('getOptions').cardView; var h = $("div.fixed-table-footer"); $(".fixed-table-body").mCustomScrollbar({ theme: "minimal", axis: 'xy', callbacks: { whileScrolling: function () { var left2 = $(".fixed-table-body>.yzxB_vertical_horizontal>.yzxB_container").css("left").replace("px", "") * -1; a && b && c.scrollLeft(left2), f && !g && h.scrollLeft(left2); } } }); });