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

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

我个人认为这是一个错误(我试图报告它但目前无法登录到bug跟踪器),并且他们应该选择在键盘上下滚动滚动事件,或选择不抛出它们因为看起来该视图似乎返回其先前的状态.

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

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

测试qr：

解决方法:

前几天在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 px,重置了视口标签.

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)之间,这是我的答案.

如果您找到更好的方法,请告诉我！祝好运 ：)

【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！