iOS Chrome / Safari – 在模态内对焦input时不需要的滚动

testingSafari和Chrome – 结果相同，所以我认为这是iOS的问题。

只有在模态内有input时才会发生这种情况，我点击该input。 在同一时刻，该input获得焦点和本地iOS键盘变得可见。

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

演示：

---

更新 ：修复提交： limonte / sweetalert2 /提交/ 4a2d36b

Answer 1

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

正如你所提到的，偏移量总是页面高度的〜50％，而不pipe你的初始偏移量在哪里。

在过去，当我观察到iOS版本有类似的“跳跃”（尽pipe跳跃less得多），我通常通过应用position: fixed （或relative ）到body来解决这个问题（ 这允许overflow: hidden正常工作 ）。

但是，如果用户已经向下滚动，则会将用户跳回到页面顶部，从而产生无人看pipe的结果。

所以，如果你打算用一些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

而对于那些正在寻找一个更一般的修复的人，你可以在打开/closures模式时做如下的事情：

 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。 我注意到你的另一个问题，你不是一个溢出的粉丝：隐藏由于滚动条出现/消失的页面移动（我完全同意）。 我build议只将JS应用于iOS设备。

Answer 2

在iOS上，由setTimeout和setInterval引起的滚动事件有问题（定位模式导致滚动？）。 我用下面的代码find了一个解决scheme。

 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

我可以想到的一件事是可能将快速点击库添加到您的代码。 一些iOS和Android的超时问题，如300ms延迟，由快速点击处理。 这是值得一试的