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

EN

我只是在这篇文章Stop page scrolling from focus中找到了这个问题的解决方案

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

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

下面是我是如何在iPhone (mobile Safari) (我使用jQuery)上解决这个问题的。

1)创建保存当前滚动位置的全局变量，该变量在用户每次滚动视区时都会更新

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

2)将焦点事件绑定到有问题的输入域。聚焦后，让文档滚动到当前位置

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

太棒了！没有烦人的“焦点滚动”

在mind...make中要做的一件事是确保输入字段在键盘上方，否则将隐藏该字段。这可以通过添加一个if-子句来轻松缓解。

我建议使用jQuery.animate()方法linked to above，而不仅仅是window.scrollTo(0,0)，因为当输入元素被聚焦时，iOS会对页面偏移属性进行动画处理。仅调用一次window.scrollTo()可能无法与此本机动画的计时一起工作。

为了了解更多背景信息，iOS对window的pageXOffset和pageYOffset属性进行了动画处理。您可以对这些属性进行有条件的检查，以便在窗口发生变化时做出响应：

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

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

$('input,select').bind('focus',function(e) { 
  $('html, body').animate({scrollTop:0,scrollLeft:0}, 'slow'); 
});