Question

我有一个带有select2插件的多选下拉列表。当下拉列表打开时，用户滚动窗口并单击某处未触发click事件。而是窗口自动滚动并关注下拉列表。

请在此处找到演示。在示例滚动并打开选择框，打开选择框，滚动顶部并单击内容1

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 2

如果您仍然遇到此问题，我如何通过CSS来解决此问题。

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

选择2多选下拉列表导致窗口滚动

2 个答案: