周记3——解决fixed属性在ios软键盘弹出后失效的bug

　　这周在做空间（“类似”qq空间）项目。首页是好友发表的说说，可以针对每条说说进行评论，评论框吸附固定在屏幕底部。此时，Bug来了...在ios上，软键盘弹出后fixed属性失效了。后来发现，ios绝大部分情况把fixed变成了absolute。为什么说是绝大部分情况下而不是100%，后面会提到。下面介绍2种方案...

 

1、css布局 （推荐）

　　解决思路：既然在 iOS 下由于软键盘唤出后，页面 fixed 元素会失效，导致跟随页面一起滚动，那么假如——页面不会过长出现滚动，那么即便 fixed 元素失效，也无法跟随页面滚动，也就不会出现上面的问题了。

　　那么按照这个思路，如果使 fixed 元素的父级不出现滚动，而将原 body 滚动的区域域移到 main 内部，而 header 和 footer 的样式不变，代码如下：

　　

　　结果：在原始输入法下， fixed 元素可以定位在页面的正确位置。滚动页面时，由于滚动的是 main 内部的 div，因此 footer 没有跟随页面滚动。

 

　　上面貌似解决了问题，但是如果在手机上实际测试一下，会发现 main 元素内的滚动非常不流畅，滑动的手指松开后，滚动立刻停止，失去了原本的流畅滚动特性。由于弹性滚动的问题，发现在webkit中，下面的属性可以恢复弹性滚动：-webkit-overflow-scrolling: touch;

 　 　　经过真机测试，发现ios有些系统中，偶尔第一次点击后还是会挡住输入框，所以上面说大部分情况下可以。如果出现这种情况，你还可以加入下面的代码试试：

1 $("input").on('focus', function () {
2     //输入框获取焦点后（键盘弹出后） body的滚动条始终下最下面
3     window.interval = setInterval(function() {
4          document.body.scrollTop = document.body.scrollHeight;
5     }, 100 );
6
7     window.addEventListener('touchmove', fn, false);
8
9 }).on('blur',function(){
10     clearInterval(window.interval);
11 })

 

2、利用scrollTop滚动到底部

　　先看下布局代码：

//获取焦点时 --滚动到底部
interval = setInterval(function() {
document.body.scrollTop = document.body.scrollHeight
}, 100);
//失去焦点取消
clearInterval(interval);

 

　　综上两种方法，第一种比较通用，第二种在软键盘弹出后，虽然没遮挡输入框，但当滚动页面时，会发现输入框跟随着滚动，因此，极力推荐第一种，简单实用。

 

　　最后想说一点，为什么ios会不识别fixed呢？因为手机屏本来能展示的内容就不多，所以不希望手机端有相对屏幕固定的元素，像某些网站的卖壮阳药广告一样死死贴在屏幕上，妨碍阅读。

 

　　参考链接：https://www.jianshu.com/p/782e61068334?tdsourcetag=s_pctim_aiomsg