Javascript 防止 <input> 元素在 iPhone 上滚动屏幕？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2952782/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preventing an <input> element from scrolling the screen on iPhone?
提问by Stefan Kendall
I have several <input type="number">elements on my webpage. I'm using jQTouch, and I'm trying to stay fullscreen at all times; that is, horizontal scrolling is bad. Whenever I click an <input>element, the page scrolls right, showing a black border on the right of the screen and de-centering everything. The inputs are offset from the left of the screen, and they begin somewhere toward the middle of the page.
<input type="number">我的网页上有几个元素。我正在使用 jQTouch，并且我一直试图保持全屏；也就是说，水平滚动是不好的。每当我单击一个<input>元素时，页面就会向右滚动，在屏幕右侧显示一个黑色边框并使所有内容偏离中心。输入从屏幕左侧偏移，它们从页面中间的某处开始。
How can I prevent this scrolling on focus?
如何防止这种滚动焦点？
回答by Mischa Magyar
I just found the solution to this problem in this post Stop page scrolling from focus
我刚刚在这篇文章中找到了解决这个问题的方法停止页面从焦点滚动
Just add onFocus="window.scrollTo(0, 0);"to your input field and you're done!
(Tried it with <textarea>and <input type="text" />on the iPad, but I'm pretty sure it'll work on the iPhone too.)
只需添加onFocus="window.scrollTo(0, 0);"到您的输入字段，你就完成了！（在 iPad上<textarea>和<input type="text" />在 iPad 上尝试过，但我很确定它也可以在 iPhone 上运行。）
I was afraid the scrolling would be visible as a flicker or something, but fortunately that is not the case!
我担心滚动会显示为闪烁或其他东西，但幸运的是事实并非如此！
回答by Maurice
here is how I solved this on the iPhone (mobile Safari) (I used jQuery)
这是我在 iPhone（移动 Safari）上解决这个问题的方法（我使用了 jQuery）
1) create a global variable that holds the current scroll position, and which is updated every time the user scrolls the viewport
1) 创建一个保存当前滚动位置的全局变量，并且每次用户滚动视口时都会更新
var currentScrollPosition = 0;
$(document).scroll(function(){
currentScrollPosition = $(this).scrollTop();
});
2) bind the focus event to the input field in question. when focused, have the document scroll to the current position
2）将焦点事件绑定到有问题的输入字段。聚焦时，让文档滚动到当前位置
$(".input_selector").focus(function(){
$(document).scrollTop(currentScrollPosition);
});
Ta Da! No annoying "scroll on focus"
打打！没有烦人的“滚动焦点”
One thing to keep in mind...make sure that the input field is ABOVE the keypad, else you will hide the field. That can be easily mitigated by adding an if-clause.
要记住的一件事...确保输入字段位于键盘上方，否则您将隐藏该字段。通过添加 if 子句可以轻松缓解这种情况。
回答by cacheflowe
I would recommend using the jQuery.animate() method linked to above, not just the window.scrollTo(0,0), since iOS animates the page offset properties when an input element is focused. Calling window.scrollTo() just once may not work with the timing of this native animation.
我建议使用链接到上面的 jQuery.animate() 方法，而不仅仅是 window.scrollTo(0,0)，因为当输入元素被聚焦时，iOS 会为页面偏移属性设置动画。仅调用一次 window.scrollTo() 可能不适用于此原生动画的时间。
For more background, iOS is animating the pageXOffsetand pageYOffsetproperties of window. You can make a conditional check on these properties to respond if the window has shifted:
对于更多的背景，是iOS的动画的pageXOffset和pageYOffset的特性window。您可以对这些属性进行条件检查以在窗口移动时做出响应：
if(window.pageXOffset != 0 || window.pageYOffset != 0) {
// handle window offset here
}
So, to expand on the aforementioned link, this would be a more complete example:
因此，为了扩展上述链接，这将是一个更完整的示例：
$('input,select').bind('focus',function(e) {
$('html, body').animate({scrollTop:0,scrollLeft:0}, 'slow');
});
回答by Himanshu P
If the focus is being set programmatically, this is what I would do:
如果以编程方式设置焦点，这就是我要做的：
Save the window's scollTop value before changing the focus. Then restore the scrollTop to the saved value immediately after setting focus.
在更改焦点之前保存窗口的 scollTop 值。然后在设置焦点后立即将 scrollTop 恢复到保存的值。
If using jQuery:
如果使用 jQuery：
var savedScrollTop = $(document).scrollTop(); // save scroll position
<code that changes focus goes here>
$(document).scrollTop(savedScrollTop ); // restore it
回答by user3255427
Try this, i think the problem is the zoom:
试试这个，我认为问题是变焦：
<meta name="viewport" content="width=device-width;initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
