打开前选择2 scrollIntoView

Question

我遇到一个问题，即在移动设备上使用select2 jQuery插件存在问题，即，当下拉列表被激活且页面上的位置很低时，虚拟键盘会覆盖选择选项。

要修复，我想在打开select2元素（实际上是上面的标签）之前将其滚动到页面顶部。

我正在尝试在select2打开时触发它：

.on('select2:opening', () => {
    myLabel.scrollIntoView({ behavior: 'smooth' });
})

由于竞态条件，此操作失败，它不会移动（但是如果scrollIntoView方法上的断点，则不会移动）

我可以阻止它打开，然后尝试按如下所示重新打开，但是当然这会由于导致堆栈溢出而失败：

.on('select2:opening', e => {
    e.preventDefault();
    myLabel.scrollIntoView({ behavior: 'smooth' });
    mySelectElement.select2('open');
})

我的问题是，这可以通过select2插件中的事件实现吗？

有没有一种方法可以延迟打开，直到元素移到我需要放置的位置？

Answer 1

由于您已经在使用jQuery，因此建议您使用animate方法：

.on('select2:opening', e => {
    $('html, body').animate({ scrollTop: $(myLabel).offset().top });
})