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

Question

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

然而,当input元素接收焦点并且显示软键盘时,滚动窗口以使输入不被键盘遮挡(即使它不会在任何情况下).

我已经阅读了SO和通过谷歌,可以添加以下内容以防止此行为(在UIWebView中查看此内容时):

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

但是,似乎在iOS 6中,即使窗口最初滚动到0,0,它也会再次滚动以使聚焦元素居中.有没有其他人遇到这个,他们知道iOS 6的修复？

Answer 1

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

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

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

缺点是元素消失了几分之一秒.如果要解决此问题,可以在原始位置动态插入原始元素的克隆,然后在webkitRequestAnimationFrame回调中将其删除.