javascript - iOS Safari/Chrome-将输入集中在模式中时不需要的滚动

在Safari和Chrome中进行了测试-结果相同，因此我认为这是iOS问题。

仅当模态中有一个输入并且我点击该输入时，才会发生这种情况。在输入获得焦点的同时， native iOS键盘也变得可见。

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

演示:

最佳答案

只是在这里添加答案，以防人们偶然发现此问题(rather than your other question, which has a great demo to illustrate this issue)

我们在工作中面临着类似的问题。如您所述，偏移量始终是页面高度的〜50％，无论您的初始偏移量在哪里，偏移都会发生。

过去，当我在早期的iOS版本中观察到类似的“跳跃”(尽管跳跃性较小)时，我通常通过将position: fixed(或relative)应用于body(which allows overflow: hidden to properly work)来解决此问题。

但是，如果用户向下滚动，则会导致无人参与的后果，即将用户跳回到页面顶部。

因此，如果您愿意使用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');
    }
}

编辑:为避免在桌面上“移动/取消移动”，我建议功能检测/UA嗅探将此功能仅应用于移动Safari。

关于javascript - iOS Safari/Chrome-将输入集中在模式中时不需要的滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37287148/