div 和 overflow:auto 中 select2 的滚动条问题

Question

我正在编写一个大表单，为了避免出现一个巨大的滚动条，我将其划分并嵌套到 overflow:auto 的 div 中。这样我就可以将表单分解成几个 windows，每个表单都有固定的高度和滚动条。

我正在尝试使用 select2 插件，但是当 select 隐藏在我的一个 windows 中时，我得到了一个滚动条来访问它，没关系，但我也在主要 window 上获得了一个滚动条，而我正是试图避免这种情况。

我在下面做了一个片段，有什么线索吗？谢谢！

$('select[name="test"]').select2();

.wrapper {
  height: 100vh;
  width: 300px;
  background-color: #ddd;
  overflow: auto;
}
.scrollingBlock {
  height: 100%;
  width: 75%;
  background-color: #ccc;
}
.bigElement {
  height: 150%;
  width: 75%;
  background-color: #c00;
}
.elementWithSelect {
  width: 75%;
  background-color: #0c0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet"/>
<div class="wrapper">
 <div class="scrollingBlock">
     <div class="bigElement"></div>
     <div class="elementWithSelect">
   <div class="selectWrapper">
    <select name="test">
     <option value="c1">Choice 1</option>
     <option value="c2">Choice 2</option>
     <option value="c3">Choice 3</option>
     <option value="c4">Choice 4</option>
     <option value="c5">Choice 5</option>
    </select>
   </div>
  </div>
 </div>
</div>

Answer 1

感谢 Fikri Muhammad Iqbal 先生在 GitHub 上回答了我，这是一个解决方法：

在某些容器上，使原始 select 隐藏的 .select2-hidden-accessible 的 css 被推到边缘位置：绝对到其相对容器

将此行添加到 CSS 就可以了：

.select2-hidden-accessible { position: fixed !important; }

div 和 overflow:auto 中 select2 的滚动条问题

Scrollbar problem with select2 inside div with overflow:auto

css

jquery-select2