打开选项时 JS select2 插件不滚动
JS select2 plugin not scrolling when options are open
我正在使用 JS Select2 库作为多个选项使用 select。 select 位于 div
中,该 div
由其父级 div
使用 css
- overflow-y: scroll
滚动。嵌套的 div
可以很好地滚动,直到打开一个选项。打开选项后 div
变为不可滚动 除非 它在 select 选项上滚动。不确定问题的根源是我的 html/css 还是它的 select2
库。
在此先感谢您的帮助!
我的标记:
<div id="topcontainer" style="padding-top: 100px; overflow-y: scroll; position: absolute; height: 1000px; width: 500px; background: #6d3353">
<div id="parent" style="position: relative; height: 3000px; width: 200px; background: #e4b9b9">
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
<option value="AL">aaaaaaa</option>
<option value="AL">bbbbbbb</option>
<option value="AL">ccccccc</option>
<option value="WY">ddddddd</option>
</select>
<script>
$(document).ready(function () {
$('.js-example-basic-multiple').select2();
});
</script>
</div>
Select2 截取滚动,如您在select2 source code.
中所见
我认为这不是问题而是一个功能,因为当你打开它时你想要滚动它,而不是 parents。
无论如何,查看 select2 events 我发现我们可以通过使用“select2:open”事件并删除添加的内容来覆盖它
“scroll.select2”命名空间事件。
示例:
$('#states').select2({
dropdownParent: $('#parent')
});
$('#states').on('select2:open', function (e) {
const evt = "scroll.select2";
$(e.target).parents().off(evt);
$(window).off(evt);
});
你可以在这里测试:Jsbin
我正在使用 JS Select2 库作为多个选项使用 select。 select 位于 div
中,该 div
由其父级 div
使用 css
- overflow-y: scroll
滚动。嵌套的 div
可以很好地滚动,直到打开一个选项。打开选项后 div
变为不可滚动 除非 它在 select 选项上滚动。不确定问题的根源是我的 html/css 还是它的 select2
库。
在此先感谢您的帮助!
我的标记:
<div id="topcontainer" style="padding-top: 100px; overflow-y: scroll; position: absolute; height: 1000px; width: 500px; background: #6d3353">
<div id="parent" style="position: relative; height: 3000px; width: 200px; background: #e4b9b9">
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
<option value="AL">aaaaaaa</option>
<option value="AL">bbbbbbb</option>
<option value="AL">ccccccc</option>
<option value="WY">ddddddd</option>
</select>
<script>
$(document).ready(function () {
$('.js-example-basic-multiple').select2();
});
</script>
</div>
Select2 截取滚动,如您在select2 source code.
中所见我认为这不是问题而是一个功能,因为当你打开它时你想要滚动它,而不是 parents。
无论如何,查看 select2 events 我发现我们可以通过使用“select2:open”事件并删除添加的内容来覆盖它 “scroll.select2”命名空间事件。
示例:
$('#states').select2({
dropdownParent: $('#parent')
});
$('#states').on('select2:open', function (e) {
const evt = "scroll.select2";
$(e.target).parents().off(evt);
$(window).off(evt);
});
你可以在这里测试:Jsbin