iOS Safari：防止（或控制）在输入焦点上滚动

Question

关于这个问题有很多（但不完全是）古老的问题，但由于我找不到任何现代的问题，我想我会再次问，希望得到一个现代的答案。

我正在开发一个业余爱好者响应式网络应用程序，但我在 iOS 上的输入焦点方面遇到了问题。我希望输入滚动到焦点上的 iOS 键盘上方（或不滚动），但无论如何，iOS 都希望将该控件居中。

在附加的 GIF 中，您可以看到我所看到的行为，然后我在末尾滚动以指示焦点事件触发后我希望发生的情况。

我发现这样的事情有效，但我想要更好的东西：以下代码有效，但在 GIF 中看到的滚动和窗口返回到我想要的位置之间有明显的延迟。另外，如果我将setTimeout()时间调整到~400以下，它就不起作用。iOS 在焦点滚动碰撞期间是否有一些阻塞？

element.addEventListener('focus', (e) => { setTimeout(() => { window.scroll(0,0) }, 500) });

 

更新#1

到目前为止，我尝试过的唯一有效的解决方案是以下内容，感觉相当简陋（其中在和侦听器scrollLock中的其他地方定义）：focusblur

document.addEventListener('scroll', (e) => {
    if (scrollLock && document.documentElement.scrollTop > 100) {
        document.documentElement.scrollTop = 100;
    }
});

preventDefault()所有涉及或调用的解决方案window.scroll都没有阻止上图所示的滚动，而是主动监视滚动并迫使其返回到我希望它起作用的位置。然而，希望这不是答案！

Answer 1

对我们有用的一件事是在获得焦点后 50 毫秒调用滚动事件。因此，如果您单击文本字段，则会触发焦点事件。在这种情况下，我们会触发一个setTimeout(() => window.scrollTo(0,100), 50).