近来在做一个挪动端的项目,底部的输入框取得核心时,软键盘弹起,在IOS手机上火炬页面全部卷走,只看到页面的下半部份。
起首经由重复调试,找到两条主要线索:
1、先找到键盘弹起时页面中会转变的值:
测试软键盘弹起时的正文全文高度、可见地区高度、文档显现高度 、被卷去的高度这几个值是不是的转变(iphone 5真机测试 320*568)。
scrollHeight:504 稳定
offsetHeight:504 稳定
clientHeight: 504 稳定
innerHeight: 206 转变
scrollTop:298 转变
转变的值有文档显现高度innerHeight、被卷去的高度scrollTop这两个值
2、找到一条线索,当输入框在页面中的位置,比键盘高度高时,软键盘弹起,不会引发页面往上滚。
因而我就这样想,当键盘弹起时,就先手动让输入框弹上来,那末页面就不会滚了,然后收缩页面高度,让输入框落到页面底部。
具体做法:
// 1、输入框猎取核心,推断是不是为IOS,如果是,把input的bottom值设为文档高度,让input先飞上天,
// 2、由于之前测试到,页面被滚走的时刻,window.innerHeight会转变,所以等键盘弹起时(设置的100ms),
// 动态转变body.height为window.innerHeight,把body的高度收缩到文档但是地区高度,
// 然后设置input的bottom为0,如许在视觉上就完成了结果啦
handleFocus() {
if (isIOS()) {
this.$refs.botFooter.style.bottom = window.innerHeight + 'px'
setTimeout(() => this.reset(), 100)
}
},
reset() {
document.body.style.height = window.innerHeight + 'px'
this.$refs.botFooter.style.bottom = 0
}
我做的这个项目是嵌套在app中的,亲测有用,而且项目已上线。app中的浏览器不会涌现ios自带浏览器中下方摆布翻页的谁人菜单条,所以在IOS自带浏览器中能够另有题目。