javascript - iOS Safari : Prevent (or Control) Scroll on Input Focus

Question

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

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

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



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

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

更新 #1

到目前为止，我尝试过的唯一可行的解​​决方案是以下，感觉很笨拙(其中 scrollLock 在 focus 和 blur 监听器的其他地方定义):

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