iOS移动端软键盘弹起空白和滚动穿透问题解决方案
作者：幽丶墨
引言
在做h5移动端项目的时候，给用户一个十分友好的体验是很必要的。最近抽空整理了下移动端（iOS端）项目中经常碰到的两个问题
键盘弹起空白
在我们点击input等弹出手机键盘，在点击完成后经常会在底部出现跟键盘同大小的空白，但是当我们滚动下页面发现又好了，这个在iOS端可以说很常见的问题了（应该是布局定位造成的，具体原因没仔细研究），解决方法就是在结束输入的时候控制滚动条偏移下就好。
下面是相关代码：
.inTouch {
-webkit-overflow-scrolling: auto;
}
.noTouch {
-webkit-overflow-scrolling: touch;
}import Vue from 'vue'
Vue.directive('resetPage', {
inserted (el) {
document.body.addEventListener('focusin', () => {
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
// 软键盘收起的事件处理
setTimeout(() => {
document.getElementsByTagName('body')[0].className = 'inTouch'
}, 100)
}
})
document.body.addEventListener('focusout', () => {
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
// 软键盘收起的事件处理
setTimeout(() => {
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
window.scrollTo(0, Math.max(scrollHeight - 1, 0))
document.getElementsByTagName('body')[0].className = 'noTouch'
}, 100)
}
})
}
})在iOS端，当元素获得焦点的时候，我们把-webkit-overflow-scrolling的值设为auto，防止滚动穿透。当元素失去焦点的时候，我们把值恢复为touch，这样页面的滚动效果不会丢失，同时我们控制滚动条偏移了1像素，解决软键盘弹起空白的问题。
关于我设置的-webkit-overflow-scrolling属性可多说两句：
// -webkit-overflow-scrolling这个样式相信大家都很熟悉了，有auto、touch两个可选值 // auto：使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 // touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。 // 为了增加滚动的流畅性，做iOS移动端适配的时候都会增加这个样式适配的 -webkit-overflow-scrolling: touch;
查看兼容性的事后素我们发现只在iOS端可用，但是出现的问题也很多，我这里加上主要原因是当input失去焦点的时候，有的时候整个页面会卡顿住（这个问题在webview中碰到的），我发现加上这个之后会解决这个问题，就把这两个放到一起了，不需要的可以不加上这个相关的。
我用的是mint-ui开发的移动端，所以在输入框的时候就可以这样使用
<mt-field class="l-modal-body-input" v-reset-page :attr="{ maxlength: 15 }" v-model="name" label="姓名："></mt-field>滚动穿透问题
这个可以说也是很常见的问题了，在我们做弹框滚动，如地址或时间picker选择器的时候，我们在滚动选择时候，底部的页面也会跟着一起滚动，一定程度上影响了用户的体验。经查找研究，当我们弹框的时候移除body的touchmove事件，是可以解决这个问题的：
// 锁定body滚动条--主要解决用户弹框滚动时的穿透
Vue.prototype.closeTouch = function () {
document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {passive: false}) // 阻止默认事件
}
Vue.prototype.openTouch = function () {
document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, {passive: false}) // 打开默认事件
}handler: (e) => {
e.preventDefault()
}当我们打开picker等弹框的时候，调用this.closeTouch()，锁定滚动，阻止默认事件。关闭弹框的时候调用this.openTouch()打开默认事件。过程虽然比较麻烦，但能实际解决问题！
以上是我做iOS移动项目时遇到的比较常见的问题，更多关于iOS软键盘弹起空白滚动穿透的资料请关注脚本之家其它相关文章！