我正在使用jquery mCustomScrollbar和niceselect插件。当我通过单击扩展niceselect下拉列表时,mCustomScrollbar未更新。我认为,这是由于下拉列表的绝对位置而发生的。但是我该如何解决呢?

这是jsfiddle链接:

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

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

最佳答案

当我尝试您的提琴手时,问题就在那里。

但是,当我将此代码复制到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>

09-17 16:41