jquery choisi et mCustomScrollbar ne fonctionne pas correctement ensemble

Question

J'utilise jquery choisi avec le plugin mCustomScrollbar de malihu et je l'ai trouvé non compatible.

Je veux appliquer la barre de défilement sur le résultat choisi et son ne fonctionne pas. Voici mon violon de travail pour voir mon travail.

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

Vous devez initialiser le mCustomScrollbar quand il est visible.

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