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

Question

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

只有在模态框内有输入并且我点击该输入时才会发生这种情况。在同一时刻，该输入获得焦点并且 native iOS 键盘变得可见。

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

演示:

---

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

Answer 1

我们在工作中遇到了类似的问题，我在您的(出色的)演示页面上偶然发现了这个问题。

如您所述，偏移量始终为页面高度的 50% 左右，无论您的初始偏移量位于何处，都会发生这种情况。

过去，当我在早期的 iO​​S 版本中观察到类似的“跳跃”(尽管跳跃不那么剧烈)时，我通常会通过应用 position: fixed(或 relative) 到 body ( this 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');
    }
}

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