防止在键盘显示器iOS 6上滚动

问题描述

我遇到了一个奇怪的问题。我目前正在使用HTML5和CSS3仅针对iOS 6制作移动网络应用。

I am running into a strange issue. I am currently producing a mobile web app using HTML5 and CSS3 for iOS 6 only.

然而，当输入元素获得焦点并显示软键盘时，窗口会滚动，以便输入不会被键盘遮挡（即使它不会在任何情况下）。

However, when an input element receives focus and the soft keyboard is displayed, the window is scrolled so that the input is not obscured by the keyboard (even though it won't be in any instance).

我已经阅读了SO并通过谷歌可以添加以下内容防止此行为（在UIWebView中查看时）：

I have read on SO and via Google that one can add the following to prevent this behaviour (when viewing this inside a UIWebView):

input.onfocus = function () {
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
}

然而，似乎在iOS 6中，即使窗口最初是滚动的到 0,0 ，然后再次滚动到焦点元素的中心。有没有其他人遇到这个并且他们知道iOS 6的修复吗？

However, it seems that in iOS 6, even though the window is initially scrolled to 0,0, it is then once again scrolled to centre the focused element. Has anyone else come across this and do they know of a fix for iOS 6?

推荐答案

我也遇到了这个问题。以下适用于iOS 6：

I hit this issue too. The following works on iOS 6:

<input onfocus="this.style.webkitTransform = 'translate3d(0px,-10000px,0)'; webkitRequestAnimationFrame(function() { this.style.webkitTransform = ''; }.bind(this))"/>

基本上，由于Safari决定是否根据文本框的垂直位置滚动页面，您可以通过暂时将元素移动到屏幕顶部之上然后在焦点事件完成后再次返回来欺骗它。

Basically, since Safari decides whether or not to scroll the page based on the textbox's vertical position, you can trick it by momentarily moving the element above the top of the screen then back again after the focus event has completed.

缺点是元素消失了一小部分a第二。如果你想解决这个问题，可以在原始位置动态插入原始元素的克隆，然后在 webkitRequestAnimationFrame 回调中删除它。

The drawback is that the element vanishes for a fraction of a second. If you want to work around that, you could dynamically insert a clone of the original element at the original location and then remove it in the webkitRequestAnimationFrame callback.

这篇关于防止在键盘显示器iOS 6上滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！