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 drowndown 时，它都会在 body 标记和包含所有选项的列表的最后动态附加 html，它包含在“.select2-results”中。当这个下拉菜单关闭时，这个动态添加的 html 被删除。

Malihu jQuery 自定义滚动条 Select 2

Malihu jQuery Custom Scrollbar with Select 2

jquery

select

scrollbar

jquery-select2

mcustomscrollbar