mousewheel - select2 + mCustomScrollbar 问题

Question

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

这是代码示例。

$(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 实际上将鼠标滚轮事件绑定到结果列表，因此在 .select2 内的 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();
});