jquery - 如何在移动 Safari 中短暂禁用滚动？

Question

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

需要明确的是，我试图解决的问题不是固定导航向上移动，同时保持在视野底部，触摸键盘顶部。相反，它在键盘上方额外移动了 50 或 60 像素，在键盘和键盘之间显示出空白，使页面看起来损坏。

从长远来看我试图解决的问题的屏幕截图。

This question似乎是一个类似的问题，有一个所谓的工作解决方案，所以我继续在 jquery 中解决它。

这里的目标是在虚拟键盘出现时阻止固定导航被推到页面中间，方法是禁用滚动功能，保持固定导航接触页面底部，而不是被向上推。这是通过当用户专注于文本输入时将正文的溢出更改为隐藏来完成的。

所以这是编程问题:我编写的jquery(通过将正文设置为溢出来禁用滚动:在输入字段聚焦时隐藏)在firefox中完美运行，但在mobile safari中它什么也不做:

$(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 中工作，上面是我正在尝试做的工作示例，但在移动 safari 中，上面的 jquery 似乎都不起作用。

知道为什么这不适用于移动 Safari，但适用于 Firefox？

Answer 1

您必须添加具有预定义视口(viewport)宽度的元视口(viewport)标签:

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

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

更新

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