键盘上下的iOS 7 Mobile Safari滚动事件问题

Question

我正在测试一些滚动事件，并注意到在键盘上的iOS 7 Mobile Safari中有一个滚动事件，但键盘关闭/关闭时没有。我想知道是否有人知道为什么会这样？

我个人认为这是一个错误（我正在尝试报告但目前无法登录到错误跟踪器），并且他们应该选择在键盘上上下滚动滚动事件，或选择因为它似乎返回到之前的状态，所以根本不抛出它们。

为了演示这个问题，我创建了这个小网站，您可以点击输入框，看到滚动事件在键盘上弹出，但在键盘菜单上按下完成时不会触发，屏幕滚动到它初始位置。我添加了一个可扫描的qr代码，可以将您发送到下面的测试网址。提前谢谢！

测试网址：http://lp.mydas.mobi/test/cs/scroll_issue/error.html

TEST qr：

Answer 1

前几天在Phonegap应用程序中进入此问题，但行为似乎与新的Safari一致。

据我所知，新的Safari会在键盘启动时调整报告给网页的视口大小。我有一个高度为100％的页面，导航绝对位于页面底部。当键盘出现时，导航器随之而来。令人讨厌的是，这导致我的两个输入字段失去焦点，隐藏它们并使其无法完成登录！

之前，我避免在视口元标记中使用 height = device-height ，因为OLD Safari似乎对状态栏一无所知，报告的设备高度也始终为20px高，导致20px滚动，看到页面的最底部。

我最终使用的修复方法是设置 height = device-height ，iOS7没有视口大小调整/导航重叠的任何问题。令我惊讶的是，在所有情况下，页面仍保持100％的设备高度。

<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">

为了让这个固定高度的情况与iOS5和6一致，我做了一点设备检测并手动计算了设备高度 - 20像素，重置了视口标签。

function iOSversion() {
  if (/iP(hone|od|ad)/.test(navigator.platform)) {
    // supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
    var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
    return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
  }
}

ver = iOSversion();

if (ver[0] >= 5 && ver[0] <= 6) {
  $('head meta[name="viewport"]').attr("content", "width=device-width, height="+(window.innerHeight-20)+", user-scalable=no")
}

我觉得这个解决方案有点不对劲，但是在摇滚（新的Safari）和硬地（旧的Safari）之间，这是我的答案。

如果您找到更好的方法，请告诉我！祝你好运：）

Answer 2

你在使用phonegap还是什么？ 如果你正在使用iscoll.js的phonegap，那么你只需要在你的设备中触发键盘事件时刷新你的滚动条。

这是键盘事件的链接： keyboard event

在关闭键盘上你只需要调用这段代码：

window.scrollTo(0, 0);