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

Posted 2020-12-30 瓜牛

　　这周在做空间（“类似”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;

 　　经过真机测试，发现ios10系统中，偶尔点击后还是会挡住输入框，所以上面说大部分情况下可以。其实，如何用这种布局的话，fixed可以直接换成absolute，这样就能保证不同的ios系统的表现一致了。

 

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