欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > > 内容正文

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

来源: 开发者 投稿于  被查看 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让软键盘消失的简单方法

用户评论