解决移动端ios键盘弹起后可视区域滚动的问题

此问题应属于移动端ios优化问题，适用于vue2项目

问题产生

• 在搜索界面，点击搜索框之后ios键盘弹起，可视区域原高度不变，会进行滚动（ios问题，安卓界面无问题）
• ios 橡皮筋效果
• 禁止滚动是为了让搜索框位置固定
• 因为搜索框失去焦点，界面滚动时，搜索框是固定的，只有搜索出来的部分可以进行滚动
• 搜索框为vant中用于搜索场景的输入框组件

问题解决

在解决此问题并没有用修改可视区域的高度来解决此问题

监听事件禁止滑动

移动端触摸事件有三个，分别定义为

1. touchstart ：手指放在一个DOM元素上。
2. touchmove ：手指拖曳一个DOM元素。
3. touchend ：手指从一个DOM元素上移开。
复制代码

touchmove 事件的速度是可以实现定义的，取决于硬件性能和其他实现细节

preventDefault 方法，阻止同一触点上所有默认行为，比如滚动。

由此找到解决方案，通过监听 touchmove，让需要滑动的地方滑动，不需要滑动的地方禁止滑动。

实现如下：

document.body.addEventListener('touchmove', function(e) {
    if(e._isScroller) return;
    // 阻止默认事件
    e.preventDefault();
}, {
    passive: false
});
复制代码

具体解决

在搜索框获得焦点时触发touchmove事件

在搜索框失去焦点时移除touchmove事件

因为设置监听和移除监听时需要为同一事件，所以需要将事件提取出来单独写一个方法

focus() {
  document.body.addEventListener("touchmove", this.stop, {
    passive: false,
  }); // passive 参数不能省略，用来兼容ios和android
},
blur() {
  document.body.removeEventListener("touchmove", this.stop, {
    passive: false,
  });
},
stop(e) {
  e.preventDefault(); // 阻止默认的处理方式(阻止下拉滑动的效果)
},
复制代码