一段心酸的移动端键盘遮挡问题探索之路

上个周的上个周，接手了一个类似qq聊天的web移动端项目，当然了对于这种看起来有很神奇效果的、并且很骚的项目，我向来是有兴趣的。根据我往年的经验，界面分分钟搭好了就像这样：

然而在移动端，尤其是IOS上测试的时候，就很悲剧了，刚把测试包发出去，总监的iphoneX便出现了弹出的键盘遮挡住输入框的bug，wtf！！！好吧，总监最大，赶紧调呗。第一次遇到这种东西，当然是百度了，找来找去，结果网上也找不到一个完美的解决方案。最后得到的答案就是ios对fixed布局的支持不是那么好！！！wtf，说好的操作系统的优越性呢？

所以就不能使用fixed布局了，当然了起初我是不服的，采取的解决方案是输入框获焦之后让他所在的块儿的定位属性改为static，再把窗口滚动到底部。嗯，确实有效果，然而此时产品狗的ip8 plus又崩了！！！ 因为这个手机只要输入框所在的块儿的定位属性为static他自己个儿就很好的出现了，也就是说如果没有滚动才是正确的。那就加个if吧。暂时解决了这个问题。

但是这个bug始终萦绕在我心头，使我很难受，最后找了个网上的教程，布局，js，完全一步步的来，然鹅，各个手机上都差不多的时候，ipx又崩了。。。

而且这个方法采用interval不断使页面往底部滚，当用户尝试往上滚动屏幕的时候，就会显得非常奇怪，怎么使当用户让页面滚动的时候不那么奇怪呢，首先肯定能想到的是就是在scroll事件里边clearInterval，然鹅。。。当键盘弹出的时候，interval里边的代码就会执行，scroll里边的代码就会被触发，这样一来，想让页面滚动到底部的策略就无法实现了，所以直接绑定scroll事件显然是不行的。

键盘从弹出到静止是一段无法确定的时间，但是唯一可以确定的是，当键盘完全弹出，并且页面不再滚动（也就是scrollTop）的值不再发生变化的时候，interval里边的代码就可以取消他的执行了，所以，最后采用的方法是当容器的scrollTop不再变化的时候取消interval，目前这个效果得到了绝大多数手机的认同，但是狗日的ipx又需要额外的私人订制，除此之外，现在是没多大问题啦，但是我相信 后续bug还是会继续出现的。

--20180528