javascript - 打开前选择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 });
})