移动端输入框调取iphone手机ios端键盘fixed定位失效如何解决

一、需求问题

在开发移动端项目的时候，iphone手机的软键盘在弹出以后，会与 position:fixed 冲突发生问题。当ios系统的手机点击输入框的时候，软键盘就会弹出，底部的输入框就会被顶到上面来。当软键盘消失后，滚动区域没有正确的回正，会导致一些内容点击事件无效。fixed定位好的元素，会跟随页面一起滚动起来，fixed定位属性也就是会失效了。

二、需求分析

在ios软键盘被唤起后，页面的fixed元素失效，也就是无法浮动，所以当页面超过一屏并且滚动的时候，失效的fixed元素也会跟随滚动。这个也是ios上经常出现的bug。

1. 第一种方法，我们可以使用isScroll.js，可以使用这个js文件去解决fixed定位滚动问题。

2. 第二种方法，我们可以假设页面不会过长的出现滚动，那么fixed定位元素失效后，也是无法跟随页面进行滚动的，也就不会出现这样的问题了。按照这个思路，如果让fixed元素的父级不出现滚动。将之前body中滚动的区域移动到另一个区域中，假设是main区域，设置main区域为position: absolute;，固定定位，进行内部的滚动，同时设置overflow-y: scroll; 和 -webkit-overflow-scrolling: touch; 让滑动更加的顺畅，以及bottom: 0可以让元素的高度不由内容所去决定。最后，有些老的ios系统不支持fixed定位，将使用fixed定位的区域尽量替换为absolute定位。

3. 第三种方法，监测屏幕变化。当点击输入框的时候弹出然键盘，会触发屏幕变化，一旦屏幕变小时将原来的fixed样式设置成其他的标准的流式布局。屏幕回到原来的大小时就恢复原来的fixed样式。

三、需求实现

1. main区域代码实现：

main {
    /* main绝对定位，进行内部滚动 */
    position: absolute;
    top: 50px;
    bottom: 0;
    /* 使之可以滚动 */
    overflow-y: scroll;
    /* 增加该属性，可以增加弹性，是滑动更加顺畅 */
    -webkit-overflow-scrolling: touch;   
}

2. 监测屏幕变化代码实现：

 var windowInnerHeight = window.innerHeight
     window.addEventListener("resize",()=>{
      if(!document.querySelector('.bottomBtn')){
        return
      }
      if(window.innerHeight < windowInnerHeight){
         document.querySelector('.bottomBtn').classList.add('staticPos') 
      }else{
       document.querySelector('.bottomBtn').classList.remove('staticPos')
      }
})