问题iOS 7移动Safari滚动键盘上下滚动事件
我正在testing一些滚动事件,并注意到有一个滚动事件触发iOS 7移动Safari在键盘上,但不是在键盘解除/closures。 我想知道为什么有人知道这是为什么?
我个人认为这是一个错误(并且正在尝试报告,但目前无法login到错误跟踪器),并且他们应该select在两个键盘上上下滚动滚动事件,或者select不丢弃它们完全是因为它看起来回到了以前的状态。
为了演示这个问题,我创build了这个小站点,您可以点击input框,看到滚动事件在键盘上触发,但是在键盘菜单上按下完成时屏幕不会触发,屏幕会滚动到初始位置。 我添加了一个可扫描的二维码,将您发送到下面的testingurl。 提前致谢!
testingurl: http : //lp.mydas.mobi/test/cs/scroll_issue/error.html
testingqr:
前几天在Phonegap应用程序中遇到了这个问题,但是这种行为似乎与新的Safari一致。
尽我所知,新的Safari调整了键盘启动时报告给网页的视口。 我有一个高度为100%的页面和一个完全位于页面底部的导航栏。 当键盘出现时,导航就随之而来。 令人烦恼的是,这导致了我的input字段中的2个失去焦点,隐藏它们,使得无法完成login!
以前,我避免在视口元标记中使用height = device-height ,因为OLD Safari似乎不了解状态栏的任何内容,并且报告的设备高度始终是20px太高,导致20px滚动看到页面底部。
我最终使用的修复是设置高度=设备高度和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") }
我对这个解决scheme感觉有点不对,但是被困在一块石头(新的Safari)和一个硬的地方(旧的Safari)之间,这是我的答案。
如果您find更好的方法,请请让我知道! 祝你好运 :)
你使用手机还是什么? 如果您使用iscoll.js的phonegap,那么当您的设备触发键盘事件时,您只需刷新您的滚动条即可。
这里是键盘事件的链接: 键盘事件
并在closures键盘上,你只需要调用这个代码:
window.scrollTo(0, 0);
- 在iOS上的Safari上的<select>元素上消除箭头和样式
- cordova:共享浏览器URL到我的iOS应用程序(Clipper iOS共享扩展)
- Safari不会通过http / 2加载一些资源
- 以编程方式在iOS设备上的input字段中select文本(移动Safari)
- 从应用程序链接到Safari“添加到主屏幕”?
- iOS Safariinput插入符号颜色
- iOS 10 Safari:防止在固定覆盖后面滚动并保持滚动位置
- iPhone HTML链接到在移动版Safari中打开页面的maps.google.com,而不是Maps App
- 在Safari浏览器中的Web应用程序中的链接打开一个iPhone应用程序