Select2 选项不使用自定义滚动条滚动

Posted 2023-05-09

【中文标题】Select2 选项不使用自定义滚动条滚动

【英文标题】：Select2 options not scrolling with custom scrollbar

【发布时间】：2017-05-28 23:52:00

【问题描述】：

我有一个固定高度的 Div 并对其应用了自定义滚动。

现在，当我使用鼠标滚轮滚动此 Div 内容时，select2 选项（保持打开时）不会与相应的 select2 下拉菜单一起滚动。

这是我的问题的JSFiddle。

单击下拉菜单以显示选项，然后使用鼠标滚轮滚动保持选项打开。即使下拉菜单上升，选项也不会滚动。

有什么解决办法吗？请推荐，谢谢！

$('.customize-content').mCustomScrollbar();

$('select').select2(
  minimumResultsForSearch: Infinity
);

<div class="customize-content has-toggle">
  <div>

    <select>
      <option>Text 1</option>
      <option>Text 2</option>
      <option>Text 3</option>
      <option>Text 4</option>
    </select>

  </div>
</div>

【参考方案1】：

问题

下拉列表的 html 被添加到您正在滚动的容器之外并覆盖绝对位置。

解决方案

使用选项dropdownParent 在容器中添加下拉菜单：-

$('select').select2( 
   minimumResultsForSearch: Infinity,
   dropdownParent:$('#mCSB_1_container')
);

Updated Fiddle

【讨论】：

谢谢！这有帮助。