Question

我的网页上有几个<input type="number">个元素。我正在使用jQTouch，我一直想保持全屏;也就是说，水平滚动很糟糕。每当我点击<input>元素时，页面向右滚动，在屏幕右侧显示黑色边框并使所有内容失真。输入从屏幕左侧偏移，它们从页面中间的某处开始。

如何防止此焦点滚动？

Answer 1

我刚在这篇文章Stop page scrolling from focus

中找到了解决这个问题的方法

只需将onFocus="window.scrollTo(0, 0);"添加到您的输入字段即可完成！（在iPad上用<textarea>和<input type="text" />试了一下，但我很确定它也能用在iPhone上。）

我担心滚动会显示为闪烁或其他东西，但幸运的是情况并非如此！

Answer 2

这是我在iPhone（移动Safari）（我使用jQuery）上解决这个问题的方法

1）创建一个全局变量，保存当前滚动位置，并在每次用户滚动视口时更新

var currentScrollPosition = 0;
$(document).scroll(function(){
    currentScrollPosition = $(this).scrollTop();
});

2）将焦点事件绑定到相关的输入字段。聚焦时，让文档滚动到当前位置

$(".input_selector").focus(function(){
    $(document).scrollTop(currentScrollPosition);
});

塔达！没有烦人的“滚动焦点”

要记住一件事......确保输入字段位于键盘上方，否则您将隐藏字段。通过添加if子句可以很容易地减轻这种情况。

Answer 3

我建议使用jQuery.animate（）方法linked to above，而不仅仅是window.scrollTo（0,0），因为iOS会在聚焦输入元素时设置页面偏移属性。仅调用window.scrollTo（）一次可能无法使用此本机动画的时间。

要获得更多背景信息，iOS会为pageXOffset的{{1}}和pageYOffset属性设置动画。如果窗口已移位，您可以对这些属性进行条件检查以响应：

window

因此，为了扩展前面提到的链接，这将是一个更完整的例子：

if(window.pageXOffset != 0 || window.pageYOffset != 0) {
  // handle window offset here
}

Answer 4

如果以编程方式设置焦点，我就会这样做：

在更改焦点之前保存窗口的scollTop值。然后在设置焦点后立即将scrollTop恢复为保存的值。

如果使用jQuery：

var savedScrollTop = $(document).scrollTop(); // save scroll position
<code that changes focus goes here>
$(document).scrollTop(savedScrollTop ); // restore it

Answer 5

试试这个，我认为问题是缩放：

<meta name="viewport" content="width=device-width;initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

阻止<input />元素在iPhone上滚动屏幕？

5 个答案: