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

Question

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

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

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

演示:

Answer 1

只是在这里添加一个答案,以防人们偶然发现这个问题(而不是你的另一个问题,它有一个很好的演示来说明这个问题)

我们在工作中面临着类似的问题.正如您所提到的,偏移总是约为页面高度的50%,无论您的初始偏移位于何处,都会发生偏移.

在过去,当我观察到与早期iOS版本类似的"跳跃"(虽然跳跃程度要小得多)时,我通常通过应用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');
    }
}

编辑:为了避免桌面上的"移动/不移动",我建议使用功能检测/ ua嗅探将其应用于移动设备.