iOS移动端软键盘弹起空白和滚动穿透问题解决方案，

来源：开发者投稿于 2024-03-23 被查看 40197 次评论：91

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软键盘弹起空白滚动穿透的资料请关注3672js教程其它相关文章！

您可能感兴趣的文章:

解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
总结IOS中隐藏软键盘的三种方式
iOS让软键盘消失的简单方法

iOS移动端软键盘弹起空白和滚动穿透问题解决方案，