我有一个带有 select2 插件的多选下拉菜单。当下拉列表打开时,用户滚动窗口并单击未触发单击事件的某处。相反,窗口会自动滚动并聚焦在下拉菜单上。
请在此处找到演示。在示例中向下滚动并打开选择框,保持选择框打开,滚动到顶部并单击内容 1
$(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>
最佳答案
这似乎是一个插件问题,正如您在他们的 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 日。所以你最好的办法是暂时注释掉这行代码,看看它是否能解决你的问题。
关于javascript - Select2 多选下拉导致窗口滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48924996/