select2 + mCustomScrollbar issues

Question

I am trying to combine select2(4.0.2) and mCustomScrollbar(3.1.13) libraries to have custom dropdown list with custom scrollbar.

Here is the code sample .

$(document).on("select2:open", "select", function() {
  $('.select2-results').mCustomScrollbar({
    mouseWheel: true,
    advanced: {
    updateOnContentResize: true
   }
  });
});

The main issue is mousewheel scrolling. It works only if you hold the cursor over the scrollbar itself. mousewheel.js(3.1.3) included, but it seems not working properly. There is no event firing while scrolling over the dropdown list body.

Any ideas, how to fix it? Thanks in advance.

Answer 1

I had the same problem. I have fix it by this way:

$(".select2").on('select2:open', function (evt) {
    $('.select2-results').mCustomScrollbar({
        scrollButtons: {
            enable: true
        },
        theme: "my-theme",
        mouseWheel: true

    });
    $('#mCSB_1_scrollbar_vertical').css("pointer-events", "auto");

    $('#mCSB_1_scrollbar_vertical').on("mousedown", function () { //cross-domain iframe mousewheel hack
        $(this).css("pointer-events", "none");

    })

})

and plus css

.select2-results .mCSB_scrollTools .mCSB_dragger{ 
     margin-left: 96% !important;
     width: 5px!important; 
}
.select2-results #mCSB_1_scrollbar_vertical{ 
     width: 100%!important; 
} 
.select2-results .mCSB_scrollTools .mCSB_draggerRail{ 
     margin-left: 96%!important; 
}

Answer 2

The other answer that was given is a bit of a hack, so I went a bit further into this and found out that select2 actually binds the mousewheel event to the result list and therefore the mousewheel event is fired on the ul element inside the .select2-results.

To fix it simply unbind the mousewheel on the ul element first:

$(".select2").on('select2:open', function (evt) {    
  // Unbind mousewheel event from select2 result lists
  $(".select2-results ul.select2-results__options").unbind("mousewheel");  
  $('.select2-results').mCustomScrollbar();
});