jquery - Malihu jQuery 自定义滚动条与 Select 2

Question

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

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

Answer 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);
});

Answer 2

这个解决方案对我有用：

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

Answer 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 被删除。