Question

我正在使用JS Select2库用作多个选项选择。该选择项位于div中，由其父级div与css-overflow-y: scroll一起滚动。嵌套的div滚动良好，直到打开一个选项。打开选项后，div变为不可滚动除非，它会在选择选项上滚动。不知道问题的根源是我的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>

Answer 1

Select2拦截滚动，如您在select2 source code中所见。

我认为这不是问题，而是功能，因为当您打开它时，您想滚动它，而不是父母。

无论如何，看着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插件不滚动

1 个答案: