iOS Safari / Chrome - 在模态中集中输入时不必要的滚动 [英] iOS Safari/Chrome - Unwanted scrolling when focusing an input inside the modal

问题描述

在Safari和Chrome中测试 - 结果相同，所以我认为是iOS问题。

Tested in Safari and Chrome - the same result, so I think it's iOS issue.

只有在模态中有一个输入， 。在同一时刻，输入获得焦点和本机iOS键盘变得可见。

This happens only if there's an input inside the modal and I tap that input. In the same moment that input got focus and native iOS keyboard become visible.

同一时刻的模态下面的页面会自动滚动到其高度的50％。这个行为是完全不需要的，我不知道如何防止这个默认的iOS功能。

Page below modal in the same moment is automatically scrolled to 50% of its height. This behaviour is totally unwanted and I have no clue how to prevent this default iOS "feature".

演示：

推荐答案

问题（），而不是您的其他问题，其中有一个伟大的演示，说明这个问题）

我们面临着一个类似的问题在工作。正如你所说，偏移总是页面高度的50％，不管你​​的初始偏移是在哪里发生的。

We are facing a similar issue at work. As you mentioned, the offset is always ~50% of the height of the page, which happens regardless of where your initial offset is.

在过去，当我观察一个类似的跳跃早期的iOS版本（虽然，不那么戏剧性的跳跃），我通常通过应用 position：fixed （或相对）到正文（它允许 overflow：hidden 正确工作）。

In the past, when I observed a similar "jumping" with earlier iOS versions (albeit, much less dramatic jumping), I have usually worked around this by applying position: fixed (or relative) to the body (which allows overflow: hidden to properly work).

但是，如果他们向下滚动，这会带来无用的后果，即将用户跳回到页面顶部。

However, this has the unattended consequence of jumping the user back to the top of the page, if they've scrolled down.

所以，如果你愿意用一些 JavaScript 解决这个问题，这里是一个修复/ hack我抛在一起：

So, if you're open to addressing this issue with some JavaScript, here's a fix/hack I've thrown together:

// Tapping into swal events
onOpen: function () {
  var offset = document.body.scrollTop;
  document.body.style.top = (offset * -1) + 'px';
  document.body.classList.add('modal--opened');
},
onClose: function () {
  var offset = parseInt(document.body.style.top, 10);
  document.body.classList.remove('modal--opened');
  document.body.scrollTop = (offset * -1);
}

CSS的外观如下：

.modal--opened {
  position: fixed;
  left: 0;
  right: 0;
}

这里是你的演示页的一个分支（从你的其他问题） ： https://jpattishall.github.io/sweetalert2/ios-bug.html

Here's a fork of your demo page (from your other question), to illustrate: https://jpattishall.github.io/sweetalert2/ios-bug.html

对于那些正在寻找更一般的修复的人，你可以在打开/关闭模态时执行类似下面的操作：

And for those who are looking for a more general fix, you could do something like the following when opening/closing a modal:

function toggleModal() {
    var offset;
    if (document.body.classList.contains('modal--opened')) {
        offset = parseInt(document.body.style.top, 10);
        document.body.classList.remove('modal--opened');
        document.body.scrollTop = (offset * -1);
    } else {
        offset = document.body.scrollTop;
        document.body.style.top = (offset * -1) + 'px';
        document.body.classList.add('modal--opened');
    }
}

编辑：为避免移动/取消移动桌面，我建议功能检测/ ua嗅探，只应用于移动safari。

To avoid the "shifting/unshifting" on desktops, I would suggest feature detection/ua sniffing to apply this to only mobile safari.

这篇关于iOS Safari / Chrome - 在模态中集中输入时不必要的滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！