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>