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 Custom Scrollbar with Select 2

3 个答案: