javascript - Select2 多选下拉导致窗口滚动

Question

我有一个带有 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>

Answer 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 日。所以你最好的办法是暂时注释掉这行代码，看看它是否能解决你的问题。