在 Safari 和 Chrome 中测试 - 结果相同,所以我认为这是 iOS 问题。
只有在模态框内有输入并且我点击该输入时才会发生这种情况。在输入获得焦点和原生 iOS 键盘变得可见的同一时刻。
模态下方的页面在同一时刻自动滚动到其高度的 50%。这种行为是完全不需要的,我不知道如何阻止这种默认的 iOS“功能”。
演示:
最佳答案
只是在这里添加一个答案,以防人们偶然发现这个问题 (rather than your other question, which has a great demo to illustrate this issue)
我们在工作中遇到了类似的问题。正如您所提到的,偏移量始终是页面高度的 50% 左右,无论您的初始偏移量在哪里,都会发生这种情况。
过去,当我在早期的 iOS 版本中观察到类似的“跳跃”(尽管跳跃不那么剧烈)时,我通常会通过应用 position: fixed
(或 relative
) 到 body
( which 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');
}
}
编辑:为了避免桌面上的“移动/取消移动”,我建议功能检测/ua 嗅探将其仅应用于移动 safari。
关于javascript - iOS Safari/Chrome - 在模态内聚焦输入时不需要的滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37287148/