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

【问题标题】：iOS Safari: Prevent (or Control) Scroll on Input FocusiOS Safari：防止（或控制）滚动输入焦点
【发布时间】：2020-07-02 23:00:42
【问题描述】：

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

我正在开发一个业余爱好者响应式 Web 应用程序，但我在 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 调用的解决方案都没有阻止上图所示的滚动，而是主动监视滚动并强制它回到我想要它起作用的位置。但是，希望这不是答案！

【问题讨论】：

你的容器有那么高吗？你能让window.scroll(0,0)在点击按钮或其他东西时工作而不是focus吗？
容器高度对移动 Safari 来说似乎并不重要（它是一个 flex 容器，但不应该超过可用的视图高度）。我可以触发 focus 以外的其他设备，但这并不能解决 iOS 的初始滚动问题。
试试这个解决方案怎么样？ stackoverflow.com/a/38621037/1746830 告诉我进展如何。
我遇到的一个解决方案是 - 在页脚周围保留一个隐藏元素。留意input 上的focus 事件并制作隐藏元素visible。也许这样就可以了。
感谢@Rayon 的研究！不幸的是，这些解决方案不起作用，但我确实发现了一种可能性，我已将其添加为 OP 的更新。

标签： javascript css ios mobile-safari

【解决方案1】：

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

【讨论】：

【解决方案2】：

我遇到了类似的问题，并在谷歌搜索时遇到了这篇文章（几个小时）。我回来发布对我有用的东西，以防它帮助其他人。

具体来说，我使用的是带有文本输入的 bootstrap-vue 模态，并且在输入字段的焦点/点击上，如果我向上滚动并键入，Android chrome 会滚动到模态的底部（看起来类似于您的视频）它保持焦点，但再次点击它会再次滚动回到同一位置。

以下是有效的：

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
}

原始信用：https://stackoverflow.com/a/35675094/1625130

【讨论】：