锁定页面+Fixed + Input 调用键盘的时候位置偏移之小技巧

##      问题描述：
     
最近在写移动端一个表单验证。用于要禁止下拉出现微信或者app浏览器显示默认信息。使用了fixed锁定页面，但是，但是在iOS下，input得到焦点调起键盘输入之后 ，页面input元素位置发生偏移。导致内容输入会出现问题+页面卡顿。最开始想到blur时，改变position值为fixed,focus为static；然鹅，不管用哇。。。
    
   

    
 ### 问题原因：
    
         查阅资料后，算是有个小答案了，不过有待考证哈。。猜测在iOS中，当你点击input准备输入时，虚拟弹窗弹出。整个视窗的高度就会变成减去键盘的高度。加上我们的父元素加上了fixed，就会整体上移.

### 解决方案：
    
> 锁定页面js：
    
   

        在mounted加入事件监听，加上.passive修饰符。由于touchmove的默认行为是滚动当前页面或者缩放页面，所以我们要阻            止，锁定页面。让他静止不动，这里说下passive；

> passive:

    但是浏览器无法知道一个监听器会不会调用preventDefault()，它能做的只有等待监听器执行完之后再去执行默认行为。而监听器是要耗时的，有时会很明显。会导致页面卡顿。其实上80%的滚动不会阻止默认行为，也就是说浏览器白等了。passive出来后。他就可以在两个线程里同时执行监听器中
    的js代码和浏览器的默认行为了。
    
具体大家可以参考。这位大神的文章，由于addEventListener和正常事件的区别时不会前后覆盖。会同时执行，并且他接受3个参数：事件名+作出处理+（capture: Boolean, passive: Boolean, once: Boolean}）
    

>css：
   

   css部分，我们最外层父级相对定位。页面form和logo绝对定位。此处需要特别注意。当你input调起iOS软键盘，输入之后，页   面高度并不会自动下移，会出现空白，
    需要触发才会恢复原来的样子。

    这里需要在用到input的地方添加blur事件，使用
      
 window.scrollTo(0, 0)**;将其位置恢复原状。
    

最后，算是解决啦，那个，就是使用正常布局+passive修饰符+scrollTo。解决的问题。