Warum wird meine benutzerdefinierte Bildlaufleiste nicht aktualisiert, wenn jquery niceselect erweitert wird?

Ich benutze jquery mCustomScrollbar und niceselect plugin. Wenn ich das Dropdown-Menü mit einem Klick auf das Dropdown-Menü auswähle, wird mCustomScrollbar nicht aktualisiert. Ich denke, das passiert wegen der absoluten Position der Dropdown-Liste. Aber wie kann ich das beheben? HierWarum wird meine benutzerdefinierte Bildlaufleiste nicht aktualisiert, wenn jquery niceselect erweitert wird?

ist die jsfiddle Link:

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

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

Quelle

2017-04-19 Taohid

Wenn Sie das DOM überprüfen, können Sie sehen, dass 'overflow: hidden' die Ursache des Problems ist. Es wird auf die Elemente '.mCustomScrollBox' und' .mCSB_container' über die Datei 'jquery.mCustomScrollbar.css' angewendet. Sie müssten diese Einstellungen entfernen/überschreiben - obwohl meine Vermutung ist, dass dies die Funktionalität des Dropdowns –

brechen wird. Problem ist, dass wenn Sie Ihre zweite DDL erweitern, Scroll nicht zunimmt. Hab ich recht? –

ja @SarinJacobSunny du hast Recht –

Wenn ich Ihre Fiedler versucht, das Problem dort war.

Aber wenn ich diesen Code in ein HTML kopierte, sehen Sie aus, wie es funktioniert.

Veröffentlichen Sie es als eine Antwort, da gibt es die einfache Möglichkeit, Code zu teilen.

Kopieren Sie dies in einen HTML-Code und versuchen Sie es. Ich denke, das war eine Einschränkung im Geiger. Lassen Sie uns die Ergebnisse wissen.

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

Quelle

2017-04-19 10:04:00

nicht funktioniert für mich – Taohid

kopieren Sie den gesamten Code in ein HTML und führen Sie –

was genau ist das Problem, das Sie jetzt beachten/ –

Warum wird meine benutzerdefinierte Bildlaufleiste nicht aktualisiert, wenn jquery niceselect erweitert wird?

Antwort

Verwandte Themen