jQuery Chosen und mCustomScrollbar funktioniert nicht richtig zusammen

Question

Ich benutze jQuery Chosen zusammen mit malihu Plugin mCustomScrollbar und Ich fand es nicht kompatibel.

Ich möchte die Bildlaufleiste auf ausgewählte Ergebnis anwenden und es funktioniert nicht. Hier ist meine Arbeit, um meine Arbeit zu sehen.

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

Sie haben die mCustomScrollbar zu initialisieren, wenn es sichtbar ist.

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