我正在使用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>