iOS Safari / Chrome - 在模态中集中输入时不必要的滚动 [英] iOS Safari/Chrome - Unwanted scrolling when focusing an input inside the modal
问题描述
在Safari和Chrome中测试 - 结果相同,所以我认为是iOS问题。
Tested in Safari and Chrome - the same result, so I think it's iOS issue.
只有在模态中有一个输入, 。在同一时刻,输入获得焦点和本机iOS键盘变得可见。
This happens only if there's an input inside the modal and I tap that input. In the same moment that input got focus and native iOS keyboard become visible.
同一时刻的模态下面的页面会自动滚动到其高度的50%。这个行为是完全不需要的,我不知道如何防止这个默认的iOS功能。
Page below modal in the same moment is automatically scrolled to 50% of its height. This behaviour is totally unwanted and I have no clue how to prevent this default iOS "feature".
演示:
推荐答案
问题(),而不是您的其他问题,其中有一个伟大的演示,说明这个问题)
我们面临着一个类似的问题在工作。正如你所说,偏移总是页面高度的50%,不管你的初始偏移是在哪里发生的。
We are facing a similar issue at work. As you mentioned, the offset is always ~50% of the height of the page, which happens regardless of where your initial offset is.
在过去,当我观察一个类似的跳跃早期的iOS版本(虽然,不那么戏剧性的跳跃),我通常通过应用 position:fixed
(或相对
)到正文
(它允许 overflow:hidden
正确工作)。
In the past, when I observed a similar "jumping" with earlier iOS versions (albeit, much less dramatic jumping), I have usually worked around this by applying position: fixed
(or relative
) to the body
(which allows overflow: hidden
to properly work).
但是,如果他们向下滚动,这会带来无用的后果,即将用户跳回到页面顶部。
However, this has the unattended consequence of jumping the user back to the top of the page, if they've scrolled down.
所以,如果你愿意用一些 JavaScript
解决这个问题,这里是一个修复/ hack我抛在一起:
So, if you're open to addressing this issue with some JavaScript
, here's a fix/hack I've thrown together:
// 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
Here's a fork of your demo page (from your other question), to illustrate: https://jpattishall.github.io/sweetalert2/ios-bug.html
对于那些正在寻找更一般的修复的人,你可以在打开/关闭模态时执行类似下面的操作:
And for those who are looking for a more general fix, you could do something like the following when opening/closing a modal:
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。
To avoid the "shifting/unshifting" on desktops, I would suggest feature detection/ua sniffing to apply this to only mobile safari.
这篇关于iOS Safari / Chrome - 在模态中集中输入时不必要的滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!