iphone 软键盘弹起，禁止页面整体往上滚动

最近在做一个移动端的项目，底部的输入框获得焦点时，软键盘弹起，在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自带浏览器中可能还有问题。

最近在做一个移动端的项目，底部的输入框获得焦点时，软键盘弹起，在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自带浏览器中可能还有问题。