select2 + mCustomScrollbar问题

Question

我正在尝试将select2（4.0.2）和mCustomScrollbar（3.1.13）库结合起来，使自定义下拉列表具有自定义滚动条。

这是code sample。

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

主要问题是鼠标滚轮滚动。仅当您将光标悬停在滚动条本身上时，它才有效。 包括mousewheel.js（3.1.3），但似乎无法正常工作。滚动下拉列表正文时没有事件触发。

任何想法，如何解决？提前谢谢。

Answer 1

我遇到了同样的问题。我通过这种方式修复它：

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

    })

})

并加上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

给出的另一个答案是有点黑客，所以我进一步研究了这一点，发现select2实际上将mousewheel事件绑定到结果列表，因此mousewheel事件在ul元素内部触发.select2-results。

要解决此问题，只需首先解开ul元素上的鼠标滚轮：

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