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

【问题标题】：Issue with iOS 7 Mobile Safari Scroll Events on Keyboard Up and DowniOS 7 Mobile Safari 键盘上下滚动事件的问题
【发布时间】：2013-10-10 23:05:10
【问题描述】：

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

我个人认为这是一个错误（我正在尝试报告它，但目前无法登录错误跟踪器），他们应该选择在键盘上下滚动事件，或者选择根本不要扔它们，因为视图似乎恢复到以前的状态。

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

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

测试二维码：

【问题讨论】：

iOS7 是有史以来漏洞最多的浏览器。我认为他们应该回滚
好吧...我们不要在这里得意忘形，即 6 仍然漂浮在周围...：p
哦，我什至都没有想到：p
我正在努力解决同样的问题（即试图阻止那些讨厌的滚动事件。）祝你好运，如果我发现了什么，我会告诉你！
您可能还想看看这个主题 - stackoverflow.com/questions/19237918/…。它不完全相同，但足以产生想法。

标签： javascript html ios safari mobile-safari

【解决方案1】：

前几天在 Phonegap 应用程序中遇到了这个问题，但该行为似乎也与新的 Safari 一致。

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

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

我最终使用的修复是设置 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）之间，这就是我的答案。

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

【讨论】：

我应该试试这个。会告诉你的！

【解决方案2】：

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

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

在关闭键盘上，您只需要调用此代码：

window.scrollTo(0, 0);

【讨论】：

这没有Phonegap。纯 JS。