jquery niceselectが展開されたときにカスタムスクロールバーが更新されないのはなぜですか？

jquery mCustomScrollbarとniceselectプラグインを使用しています。 niceselectドロップダウンをクリックして展開すると、mCustomScrollbarは更新されません。私は、ドロップダウンリストの絶対的な位置が原因で起こっていると思います。しかし、どうすればこの問題を解決できますか？私はあなたのシオマネキを試みたときに、問題があったjquery niceselectが展開されたときにカスタムスクロールバーが更新されないのはなぜですか？

https://jsfiddle.net/faridulhassan/u3zw09yr/

var $ = jQuery.noConflict(), 
wrapper = $('.wrapper'); 
$('select').niceSelect(); 
wrapper.mCustomScrollbar();

出典

2017-04-19 Taohid

DOMを調べると、「overflow：hidden」が原因であることがわかります。これは、 'jquery.mCustomScrollbar.css'ファイルを通して' .mCustomScrollBox'と '.mCSB_container'要素に適用されています。あなたはこれらの設定を削除/上書きする必要があります - 私の推測ではこれはドロップダウンメニューの機能を損なうでしょう。 –

問題は、2番目のDDLを展開するとスクロールが増えないことです。私は正しいですか？ –

はい@SarinJacobSunnyあなたは正しいです –

：ここ

はjsfiddleリンクです。

しかし、私はこのコードをHTMLにコピーしたとき、動作しているように見えます。

答えを投稿すると、コードを簡単に共有できるようになります。

これをhtmlにコピーしてお試しください。私はこれがフィドラーの限界だと思う。結果をお知らせください。

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css"> 
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.min.css"> 
     <style> 
      body { 
       overflow: hidden; 
      } 

      .wrapper { 
       height: 100vh; 
      } 

      .mCSB_dragger_bar { 
       background-color: #988f01 !important; 
      } 
      .nice-select { 
       float: none; 
       .list { 
        width: 100%; 
       } 
      } 
     </style> 
    </head> 
    <body> 
     <div class="wrapper"> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro voluptatibus accusantium saepe dolor, numquam, debitis magnam consequatur ullam quaerat laudantium pariatur suscipit, ratione odio libero dicta deleniti! Adipisci, vero. 
      </p> 
      <div> 
       <select name="" id=""> 
        <option value="">option 1</option> 
        <option value="">option 2</option> 
        <option value="">option 3</option> 
        <option value="">option 4</option> 
        <option value="">option 5</option> 
        <option value="">option 6</option> 
        <option value="">option 7</option> 
        <option value="">option 8</option> 
        <option value="">option 9</option> 
        <option value="">option 10</option> 
        <option value="">option 11</option> 
        <option value="">option 12</option> 
        <option value="">option 13</option> 
        <option value="">option 14</option> 
        <option value="">option 15</option> 
        <option value="">option 16</option> 
        <option value="">option 17</option> 
        <option value="">option 18</option> 
        <option value="">option 19</option> 
        <option value="">option 20</option> 
        <option value="">option 21</option> 
        <option value="">option 22</option> 
        <option value="">option 23</option> 
        <option value="">option 24</option> 
        <option value="">option 25</option> 
        <option value="">option 26</option> 
        <option value="">option 27</option> 
       </select> 
      </div> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro voluptatibus accusantium saepe dolor, numquam, debitis magnam consequatur ullam quaerat laudantium pariatur suscipit, ratione odio libero dicta deleniti! Adipisci, vero. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro voluptatibus accusantium saepe dolor, numquam, debitis magnam consequatur ullam quaerat laudantium pariatur suscipit, ratione odio libero dicta deleniti! Adipisci, vero. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro voluptatibus accusantium saepe dolor, numquam, debitis magnam consequatur ullam quaerat laudantium pariatur suscipit, ratione odio libero dicta deleniti! Adipisci, vero. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro voluptatibus accusantium saepe dolor, numquam, debitis magnam consequatur ullam quaerat laudantium pariatur suscipit, ratione odio libero dicta deleniti! Adipisci, vero. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro voluptatibus accusantium saepe dolor, numquam, debitis magnam consequatur ullam quaerat laudantium pariatur suscipit, ratione odio libero dicta deleniti! Adipisci, vero. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro voluptatibus accusantium saepe dolor, numquam, debitis magnam consequatur ullam quaerat laudantium pariatur suscipit, ratione odio libero dicta deleniti! Adipisci, vero. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro voluptatibus accusantium saepe dolor, numquam, debitis magnam consequatur ullam quaerat laudantium pariatur suscipit, ratione odio libero dicta deleniti! Adipisci, vero. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro voluptatibus accusantium saepe dolor, numquam, debitis magnam consequatur ullam quaerat laudantium pariatur suscipit, ratione odio libero dicta deleniti! Adipisci, vero. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro voluptatibus accusantium saepe dolor, numquam, debitis magnam consequatur ullam quaerat laudantium pariatur suscipit, ratione odio libero dicta deleniti! Adipisci, vero. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro voluptatibus accusantium saepe dolor, numquam, debitis magnam consequatur ullam quaerat laudantium pariatur suscipit, ratione odio libero dicta deleniti! Adipisci, vero. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro voluptatibus accusantium saepe dolor, numquam, debitis magnam consequatur ullam quaerat laudantium pariatur suscipit, ratione odio libero dicta deleniti! Adipisci, vero. 
      </p> 
      <div> 
       <select name="" id=""> 
        <option value="">option 1</option> 
        <option value="">option 2</option> 
        <option value="">option 3</option> 
        <option value="">option 4</option> 
        <option value="">option 5</option> 
        <option value="">option 6</option> 
        <option value="">option 7</option> 
        <option value="">option 8</option> 
        <option value="">option 9</option> 
        <option value="">option 10</option> 
        <option value="">option 11</option> 
        <option value="">option 12</option> 
        <option value="">option 13</option> 
        <option value="">option 14</option> 
        <option value="">option 15</option> 
        <option value="">option 16</option> 
        <option value="">option 17</option> 
        <option value="">option 18</option> 
        <option value="">option 19</option> 
        <option value="">option 20</option> 
       </select> 
      </div> 
     </div> 

     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script> 



     <script> 
      var $ = jQuery.noConflict(), 
        wrapper = $('.wrapper'); 
      $('select').niceSelect(); 
      wrapper.mCustomScrollbar({ 
       mouseWheelPixels: 200, 
       scrollInertia: 100, 
       callbacks: { 
        onScrollStart: function() {}, 
        onInit: function() {}, 
        onOverflowY: function() {} 
       }, 
       mouseWheel: { 
        preventDefault: false 
       } 
      }); 

     </script> 
    </body> 
</html>

出典

2017-04-19 10:04:00

私のために働いていません – Taohid

htmlにコード全体をコピーして実行してください –

今すぐ気づいている問題は何ですか/ –

jquery niceselectが展開されたときにカスタムスクロールバーが更新されないのはなぜですか？

答えて

関連する問題