Question

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

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

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

演示：

更新：修正提交：limonte/sweetalert2/commit/4a2d36b

Answer 1

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

正如您所提到的，偏移总是约为页面高度的50％，无论您的初始偏移位于何处，都会发生偏移。

在过去，当我观察到类似的＆＃34;跳跃＆＃34;对于早期的iOS版本（虽然跳跃性较小），我通常通过将position: fixed（或relative）应用于body（this allows overflow: hidden to properly work）来解决这个问题。 / p>

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

因此，如果您对某些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设备。

Answer 2

在iOS上我遇到了由setTimeout和setInterval引起的滚动事件的问题（模态导致滚动的位置？）。我用以下代码找到了一个解决方案。

Function.prototype.bind = function(parent) {
  var f = this;
  var args = [];

  for (var a = 1; a < arguments.length; a++) {
    args[args.length] = arguments[a];
  }

  var temp = function() {
    return f.apply(parent, args);
  }

  return(temp);
}


setTimeout(function() {
  // your animation stuff here
}.bind(this), 100);

Answer 3

我可以想到的一件事是将Fast Click库添加到您的代码中。某些iOS和Android超时问题（如300ms延迟）由Fast Click处理。值得一试

Answer 4

要检查的另一件事是输入字段的字体大小大于将触发输入缩放的最小字体大小。我在这里从内存中工作，但是我遇到了类似的问题。将输入字体大小设置为16px（还是从内存中再次获取）或更大，将阻止iOS Safari尝试缩放输入字段，从而使页面滚动混乱。

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

4 个答案: