4

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

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

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

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

测试qr：二维码

4

2 回答 2

7

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

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

以前，我避免在视口元标记中使用height=device-height因为 OLD Safari 似乎对状态栏一无所知，并且报告的 device-height 总是 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）之间，这就是我的答案。

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

于 2013-10-15T20:49:38.430 回答
1

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

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

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

window.scrollTo(0, 0);
于 2013-10-11T14:12:56.540 回答