在Safari和Chrome中测试过 – 结果相同,所以我认为这是iOS问题.
只有在模态中有输入并且我点击该输入时才会发生这种情况.在同一时刻,该输入变得焦点,原生iOS键盘变得可见.
同一时刻模态下面的页面会自动滚动到其高度的50％.这种行为是完全不需要的,我不知道如何防止这个默认的iOS“功能”.
演示：
解决方法
我们在工作中遇到了类似的问题,我在您的(优秀)演示页面上偶然发现了这个问题.
正如您所提到的,偏移总是约为页面高度的50％,无论您的初始偏移位于何处,都会发生这种情况.
在过去,当我观察到与早期iOS版本类似的“跳跃”(虽然跳跃性更小),我通常通过应用位置：固定(或相对)身体(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设备.
