Select2 内的完美滚动条。容器高度错误

Question

我正在尝试将 Perfect 滚动条插件与 Select2 集成。向下滚动时滚动条会走得很远。 PS 似乎错误地计算了 select2 选项容器的高度。有人可以帮忙吗？

这是一个简单的 html 片段：

<select class="select2-example">
  <option value="1">Item 1</option>
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
  <option value="4">Item 4</option>
  <option value="5">Item 5</option>
  <option value="6">Item 6</option>
  <option value="7">Item 7</option>
  <option value="8">Item 8</option>
  <option value="9">Item 9</option>
  <option value="10">Item 10</option>
  <option value="11">Item 11</option>
  <option value="12">Item 12</option>
</select>

Js:

$(document).ready(function() {
  $(".select2-example").select2();
  $('.select2-example').on("select2:open", function () {
    $('.select2-results__options').perfectScrollbar();
  });
});

这里是jsfiddle

Answer 1

来自 perfect-scrollbar's documentation：

The following requirements should meet:

The container must have a position style.**

所以你只需要给容器添加一个位置样式：

.select2-results__options {
  position: relative;
}

已更新fiddle

Select2 内的完美滚动条。容器高度错误

Perfect scrollbar inside of Select2. Container height bug

jquery

jquery-select2

perfect-scrollbar