iOS Chrome/Safari - 将输入聚焦在模态内时不需要滚动

Question

在Safari和Chrome中测试过 - 结果相同,所以我认为这是iOS问题.

只有在模态中有输入并且我点击该输入时才会发生这种情况.在同一时刻,该输入变得焦点,原生iOS键盘变得可见.

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

演示:

---

更新:修复提交:limonte/sweetalert2/commit/4a2d36b

Answer 1

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

正如您所提到的，偏移量始终约为页面高度的 50%，无论您的初始偏移量在哪里，都会发生这种情况。

过去，当我在早期的 iO​​S 版本中观察到类似的“跳跃”（尽管跳跃不那么剧烈）时，我通常会通过应用position: fixed(或relative) 来解决这个问题body（这可以overflow: hidden正常工作）。

然而，如果用户向下滚动，这会产生无人值守的结果：将用户跳回页面顶部。

因此，如果您愿意用一些方法解决这个问题JavaScript，这里有我整理的一个修复/黑客：

// 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

对于那些正在寻找更通用修复的人，您可以在打开/关闭模式时执行如下操作：

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

编辑：需要注意的一件事是，我们并没有盲目地将修复应用于所有设备/平台，只是 iOS Safari。我在您的其他问题中注意到您不喜欢溢出：由于滚动条出现/消失时页面的移动而隐藏（我完全同意）。我建议只将 JS 应用于 iOS 设备。