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

给出的另一个答案有点类似于hack，所以我进一步研究了一下，发现select2实际上将鼠标滚轮事件绑定到结果列表，因此在.select2- result中的ul元素上触发了鼠标滚轮事件。

要解决这个问题，只需先解除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();
});