jquery選択したものとmCustomScrollbarが正しく動作しない

Question

juleryをmalihuのプラグインmCustomScrollbarと一緒に使用しました。 互換性がありません。

選択した結果にスクロールバーを適用し、そのスクロールバーが機能しないようにしたいとします。ここに私の仕事を見るための私の働くフィドルです。

HTML：

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

.select { 
 
    max-height: 100px; 
 
}

<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>

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

Answer 1

あなたはそれが表示されているときmCustomScrollbarを初期化する必要があります。解決策として

$(function() { 
 
    $('select.select').chosen({ 
 
    disable_search_threshold: 5, 
 
    width: '50%' 
 
    }); 
 
    $('select.select').on('chosen:showing_dropdown', function() { 
 
    $('.chosen-results:visible').mCustomScrollbar({ 
 
     theme: 'minimal-dark' 
 
    }); 
 
    }); 
 
    $('select.select').on('chosen:hiding_dropdown', function() { 
 
    if($(".chosen-results").length) { 
 
    $('.chosen-results').mCustomScrollbar('destroy'); 
 
    } 
 
    }); 
 
});

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

<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>