Malihu jQuery 自定义滚动条与 Select 2答案

【问题标题】：Malihu jQuery Custom Scrollbar with Select 2Malihu jQuery 自定义滚动条与 Select 2
【发布时间】：2016-02-26 19:50:19
【问题描述】：

滚动条仅在第一次打开时显示，不再显示。我做错了什么？

$('.select').on('select2:open', function () {
    function showScroll() {
        $('.select2-results__options').mCustomScrollbar();
    }
    setTimeout(showScroll, 1);
});

【问题讨论】：

您找到解决此问题的方法了吗？

标签： jquery select scrollbar jquery-select2 mcustomscrollbar

【解决方案1】：

我找到了解决办法：

$('.select').on('select2:open', function () {
    $('.select__dropdown .select2-results__options').mCustomScrollbar('destroy');
    $('.select__dropdown .select2-results__options').mCustomScrollbar('update');
    setTimeout(function() {
        $('.select__dropdown .select2-results__options').mCustomScrollbar({
            axis: 'y',
            scrollbarPosition: 'inside',
            advanced:{
                updateOnContentResize: true
            },
            live: true
        });
    }, 0);
});

【讨论】：

【解决方案2】：

这个解决方案对我有用：

$('select').on('select2:open', function (e) {
 $('.select2-results__options').mCustomScrollbar('destroy');
  setTimeout(function () {
    $('.select2-results__options').mCustomScrollbar();
  }, 0);
});

【讨论】：

【解决方案3】：

选择的答案对我不起作用，所以我想出了以下解决方案：

$('.your-select2-element').on('select2:open', function (e) {
     setTimeout(function () {
          $('.select2-results > ul').mCustomScrollbar();
     },100); /* if there are multiple select2 instances on a page, timeout makes sure right drop down is being targeted*/
});
$('.your-select2-element').on('select2:closing', function (e) {
     $('.select2-results > ul').mCustomScrollbar("destroy");
});

如果您想知道为什么使用 '.select2-results > ul' 选择器？

每次打开 select2 下拉菜单时，它都会在 body 标记和包含所有选项的列表的最后动态附加 html，它包含在 '.select2-results' 中。当这个下拉列表关闭时，这个动态添加的 html 被删除。

【讨论】：