Select2多选下拉菜单导致窗口滚动

Posted 2023-05-07

【中文标题】Select2多选下拉菜单导致窗口滚动

【英文标题】：Select2 multi select dropdown causing window scroll

【发布时间】：2018-08-02 03:51:27

【问题描述】：

我有一个带有 select2 插件的多选下拉菜单。当下拉菜单打开时，用户滚动窗口并单击未触发单击事件的某个位置。相反，窗口会自动滚动并专注于下拉菜单。

请在此处找到演示。在示例中向下滚动并打开选择框，保持选择框处于打开状态，向上滚动并点击内容 1

Demo

$(document).ready(function() 
  $("#multiselectDropdown").select2()
  $("h1").on("click", function() 
    alert("clicked " + $(this).text())
  )
);

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<h1>
  Content1
</h1>
<h1>
  Content2
</h1>
<h1>
  Content3
</h1>
<h1>
  Content4
</h1>
<h1>
  Content5
</h1>
<h1>
  Content6
</h1>
<h1>
  Content7
</h1>
<h1>
  Content8
</h1>
<h1>
  Content9
</h1>
<h1>
  Content10
</h1>
<select id="multiselectDropdown" style="width:200px" multiple>

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

        </select>

【参考方案1】：

这似乎是一个插件问题，您可以在他们的 github 存储库问题中看到：

closing dropdown which is out of the viewport causes viewport to scroll #3663

和

Scroll back to the input field when lost focus (after select2:closing) #4983

用户zoka123提到这个问题可以通过注释掉来解决 这部分在 select2/dist/js/select2.full.js:

line 1407 self.$selection.focus(); 

此问题仍未解决，上次活动是在 2017 年 12 月 29 日。因此，最好的办法是暂时注释掉这行代码，看看它是否能解决您的问题。

【讨论】：

这成功了！谢谢！注意：我为使用多选的页面创建了原始 Select2.Min.JS 的副本...以避免在其他地方使用 Select2 出现问题。

【参考方案2】：

如果你仍然遇到这个问题，我是通过 css 解决问题的。

.select2-dropdown .select2-results__option 
  position: relative;

【讨论】：

这并不能解决问题。