jquery选择和mCustomScrollbar不能正常工作

Question

我使用jquery Chosen和malihu的插件mCustomScrollbar和 我发现它不兼容。

我想在选定的结果上应用滚动条而不能正常工作。这是我工作的小提琴。

HTML：

＆＃13;

＆＃13;

$(function() {
  $('select.select').chosen({
    disable_search_threshold: 10, 
    width: "50%"
  });
  
  //$('.chosen-results').mouseenter(function() {
    $('.chosen-results').mCustomScrollbar({
      theme: "dark-3"
    });
  //});
});

＆＃13;

.select {
  max-height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.css" rel="stylesheet"/>

<select id="name" class="select">
  <option value="">Select</option>
  <option value="aaa">aaa</option>
  <option value="bbb">bbb</option>
  <option value="ccc">ccc</option>
  <option value="ddd">ddd</option>
  <option value="eee">eee</option>
  <option value="fff">fff</option>
</select>

＆＃13;

＆＃13;

＆＃13;

jsFiddle：https://jsfiddle.net/bbwfvcj0/

Answer 1

当mCustomScrollbar可见时，你必须初始化它。

＆＃13;

＆＃13;

.chosen-drop .chosen-results {
  max-height: 100px !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.css" rel="stylesheet" />

<select id="name" class="select">
  <option value="">Select</option>
  <option value="aaa">aaa</option>
  <option value="bbb">bbb</option>
  <option value="ccc">ccc</option>
  <option value="ddd">ddd</option>
  <option value="eee">eee</option>
  <option value="fff">fff</option>
  <option value="ggg">ggg</option>
  <option value="hhh">hhh</option>
</select>

＆＃13;

override func controlTextDidChange(_ obj: Notification)

＆＃13;

＆＃13;

＆＃13;