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

Question

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

我正在开发一个爱好者响应式 web 应用程序，但我在 iOS 上输入焦点时遇到问题。我希望输入滚动到 iOS 键盘上方的焦点（或不滚动），但 iOS 想要使该控件居中无论。

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

我发现有一件事是可行的，但我想要更好的东西：以下代码可行，但在您在 GIF 中看到的滚动和 window 返回到 position 之间有明显的延迟我喜欢它。 另外，如果我将setTimeout()时间调整到 ~400 以下，它也不起作用。 iOS 在其焦点滚动凸点期间是否有一些块？

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

更新#1

到目前为止，我尝试过的唯一有效的解决方案如下，感觉很糟糕（其中scrollLock在focus和blur listeners 的其他地方定义）：

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

Answer 2

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

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

这是有效的：

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

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

Answer 3

与 iOS 15 类似的问题，在我的特定情况下，当页面右侧的输入元素成为焦点时，正文正在水平滚动。 添加position: fixed到body和html元素为我修复了这个，但我没有任何滚动（单页应用程序）所以这可能会给其他人带来更多问题。