如何在移动Safari中暂时禁用滚动？

Question

我的页面底部有一个固定的导航栏，对于大多数公园来说，它可以在移动野生动物园中正常工作。但是，我已经添加了一个文本输入字段，现在当文本输入被聚焦时，它会导致键盘出现，这迫使固定导航由于某种原因向上移动到键盘上方的页面上方，在它和键盘之间添加大约60px的空白。此外，它还将元素设置为相对位置，直到输入字段不再聚焦，键盘消失。

要清楚，我试图解决的问题不是固定导航向上移动，同时保持在视野的底部，触摸键盘的顶部。相反，它是在键盘上方移动50或60像素，在它和键盘之间显示空白区域，使页面显得破碎。

我正试图解决的问题的屏幕截图。

This question似乎与一个可行的解决方案类似的问题，所以我在jquery中继续它。

此处的目标是通过禁用滚动功能，使固定导航保持触摸页面底部而不是向上推动，在虚拟键盘出现时停止将固定导航推到页面中间。这是通过在用户关注文本输入时将主体的溢出更改为隐藏来完成的。

所以这里是编程问题：我编写的jquery（通过将主体设置为溢出来禁用滚动：隐藏输入字段时隐藏）在firefox中完美运行，但在移动safari中它什么都不做：< / p>

$(document).ready(function(){
$(".mobile_text_focus_fix").focus(function(){
$("body").css("overflow","hidden");});  
$(".mobile_text_focus_fix").blur(function(){
$("body").css("overflow","visible");});
});

上面的jquery使用了这个html：

<input type="text" class="mobile_text_focus_fix"></input>

Firefox截图：

正如我所提到的，它在Firefox中运行，上面是我正在尝试做的一个工作示例，但在移动safari中，上面的jquery似乎都没有用。

任何想法为什么这不适用于移动游猎，但在Firefox中有效？

Answer 1

您必须添加具有预定义视口宽度的元视口标记：

<meta name='viewport' content='width=device-width'>

这不应该阻止可滚动性，但可以解决您的问题......

<强>更新

否则尝试阻止默认触摸行为......