select2 + mCustomScrollbar 问题答案

【问题标题】：select2 + mCustomScrollbar issuesselect2 + mCustomScrollbar 问题
【发布时间】：2016-03-18 10:22:25
【问题描述】：

我正在尝试将 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) 包括在内，但它似乎无法正常工作。滚动下拉列表正文时不会触发事件。

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

【问题讨论】：

我也有同样的问题...您找到解决方案了吗？
很遗憾没有。我切换到 selectBoxIt lib，而不是 select2。

标签： mousewheel select2 mcustomscrollbar

【解决方案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; 
}

【讨论】：

and plus css .select2-results .mCSB_scrollTools .mCSB_dragger{ margin-left: 96% !important;宽度：5px！重要； } .select2-results #mCSB_1_scrollbar_vertical{ 宽度：100%！重要； } .select2-results .mCSB_scrollTools .mCSB_draggerRail{ margin-left: 96%!important; }

【解决方案2】：

给出的另一个答案有点骇人听闻，所以我对此进行了深入研究，发现 select2 实际上将鼠标滚轮事件绑定到结果列表，因此鼠标滚轮事件在内部的 ul 元素上触发.select2-结果。

要修复它，只需先解开 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();
});

【讨论】：