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)
      }
    })
  }
})

// -webkit-overflow-scrolling这个样式相信大家都很熟悉了，有auto、touch两个可选值
// auto：使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
// touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
// 为了增加滚动的流畅性，做iOS移动端适配的时候都会增加这个样式适配的
-webkit-overflow-scrolling: touch;

<mt-field class="l-modal-body-input" v-reset-page :attr="{ maxlength: 15 }" v-model="name" label="姓名："></mt-field>

// 锁定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()
}