Плагин JS select2 не прокручивается при открытых настройках - PullRequest
Новая
       2

Плагин JS select2 не прокручивается при открытых настройках

1 голос
/ 31 марта 2019

Я использую библиотеку JS Select2 для использования в качестве нескольких вариантов выбора.Выбор находится в пределах div, который прокручивается его родителем div с помощью css - overflow-y: scroll.Вложенная div прекрасно прокручивается до тех пор, пока не будет открыта опция.При открытии опций div становится недоступным для прокрутки , если только не прокручивается в опциях выбора.Не уверен, что источником проблемы является мой HTML / CSS или select2 lib.

Заранее благодарен за любую помощь!

Моя разметка: 

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

1 Ответ

1 голос
/ 31 марта 2019

Select2 перехватывает прокрутку, как вы можете видеть в исходном коде select2 .

Я думаю, что это не проблема, а особенность, потому что, когда она у вас открыта, вы хотите прокрутить ее, а не родителей.

В любом случае, глядя на события select2 Я обнаружил, что мы можем переопределить его, используя событие " 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

...