Malihu jQuery Custom Scrollbar with Select 2

Question

Scrollbar shows only on first opening and no more. What I did wrong?

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

did you find any workaround for this issue? – Sampat Badhe Jan 10 '16 at 14:29 — Sampat Badhe, Jan 10 '16 at 14:29

score 5 · Accepted Answer · answered Mar 29 '16 at 12:02

I found a solution:

$('.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);
});

score 1 · Answer 2 · answered Jun 06 '17 at 12:33

1

This solution works for me:

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

answered Jun 06 '17 at 12:33

Filip Wroński

356
2
8

score 0 · Answer 3 · answered Oct 22 '19 at 16:44

The selected answer did not work for me, so I came up with following solution:

$('.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");
});

In case you wondering why the '.select2-results > ul' selector ?

Well every time select2 drowndown is opened, it dynamically appends html at the very end of body tag and the list that holds all of the options, its wrapped inside '.select2-results'. And when this dropdown is closed, this dynamically added html is removed.

Malihu jQuery Custom Scrollbar with Select 2

3 Answers3