iOS Chrome / Safari - 在模态中集中输入时，不必要的滚动 [英] iOS Chrome/Safari - 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 gets focus and native iOS keyboard become visible.

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

The 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".

演示：

PS。我已经问了同样的问题前，这个问题是不同的，因为sweetalert2现在添加 overflow-y：hidden 到身体，这个奇怪的bug仍然在这里。

PS. I already asked the same question before, this question is different because of sweetalert2 now adds overflow-y: hidden to body and this weird bug is still here.

推荐答案

我们正面临着在工作中类似的问题，我偶然发现了你的（优秀）演示页这个问题。

We are facing a similar issue at work, and I stumbled upon this question with your (excellent) demo page.

如前所述，偏移总是大约为页面高度的50％，无论您的初始偏移位置在哪里都会发生。

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 （或 relative ）到正文（这允许 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 (this 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 解决这个问题，这里是一个修复/黑客我抛在一起：

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, 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');
    }
}

编辑：需要注意的一点是， t应用修复所有设备/平台盲目，只是iOS Safari。我注意到在你的另一个问题，你不是一个粉丝的溢出：隐藏，由于页面移动时，滚动条出现/消失（我完全同意）。我建议只将JS应用到iOS设备。

One thing to note is that we didn't apply the fix to all devices/platforms blindly, just iOS Safari. I noticed in your other question that you weren't a fan of overflow: hidden due to the shifting of the page when the scrollbar appears/disappears (which I totally agree with). I would suggest just applying the JS to iOS devices only.

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