bootstrap-table滾動條利用 mCustomScrollbar 插件美化滾動條，完美解決橫向滾動條 偏移bug

------------------------20190119 bug 修複--------------------------------

var exec = true;
    //切換滾動條
    $("#" + _id).on('scroll-body.bs.table', function (e) {
        //銷毀
        $(e.target).parent().parent().parent().mCustomScrollbar("destroy");
        var body_height = $($(e.target).parent().parent().children()[1]).height();
        var body_width = $($(e.target).parent().parent().children()[1]).width();
        var content_height = $($($(e.target).parent().parent().children()[1]).children()[1]).height();
        var content_width = $($($(e.target).parent().parent().children()[1]).children()[1]).width();

        var _options = $(e.target).bootstrapTable('getOptions');
        var a = _options.showHeader;
        var b = _options.height;
        //header
        var c = $($(e.target).parent().parent().children()[0]);
        var f = _options.showFooter;
        var g = _options.cardView;
        //footer
        var h = $($(e.target).parent().parent().children()[2]);
        //body
        $($(e.target).parent().parent().children()[1]).mCustomScrollbar({
            theme: "minimal",
            axis: 'xy',
            callbacks: {
                whileScrolling: function () {
                    var draggerLeft = $(this).children(":eq(0)").children(":eq(0)").css("left").replace("px", "") * -1;
                    a && b && c.scrollLeft(draggerLeft), f && !g && h.scrollLeft(draggerLeft);
                }
            }
        });
        //防止 縮放的時候 重複調用
        if (exec) {
            $("#" + _id).bootstrapTable("showAllColumns");
            exec = false;
            setTimeout(function () {
                exec = true;
            }, 500)
        }
        //防止 bootstrap-select  下拉框被 遮罩
        var sc = $(e.target).parent().height();
        $(e.target).parent().height(sc <= body_height ? body_height : sc);
    });
}      

注意下

bootstrap-table 使用mCustomScrollBar，如果有橫向滾動條則 table表頭不會 和 内容一起關聯

下面是

解決方案：

boostrap-table出現了注冊滾動條事件綁定 table 内容 和 表頭關聯。

下面的就是關聯方法：

b.options.showHeader && b.options.height................................

百度一下。找到 mCustomScrollbar 滾動條 滾動事件

$(selector).mCustomScrollbar({

}
}
           

});

顧名思義：當插件滾動條滾動時，觸發 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);
            }
        }
    });
});
           

以下是封裝好的方法，無需修改，粘貼即用。

//切換滾動條
$("#" + _id).on('scroll-body.bs.table', function (e) {
    var _options = $(e.target).bootstrapTable('getOptions');
    var a = _options.showHeader;
    var b = _options.height;
    //header
    var c = $($(e.target).parent().parent().children()[0]);
    var f = _options.showFooter;
    var g = _options.cardView;
    //footer
    var h = $($(e.target).parent().parent().children()[2]);
    //body
    $($(e.target).parent().parent().children()[1]).mCustomScrollbar({
        theme: "minimal",
        axis: 'xy',
        callbacks: {
            whileScrolling: function () {
                var draggerLeft = $(this).children(":eq(0)").children(":eq(0)").css("left").replace("px", "") * -1;
                a && b && c.scrollLeft(draggerLeft), f && !g && h.scrollLeft(draggerLeft);
            }
        }
    });
});