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;

bootstrap-table滚动条利用 mCustomScrollbar 插件美化滚动条,完美解决横向滚动条 偏移bug

$('#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);
            }
        }
    });
});

 

bootstrap-table滚动条利用 mCustomScrollbar 插件美化滚动条,完美解决横向滚动条 偏移bug