Блог

Я использую библиотеку 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>
  

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