周记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;
先看下布局代码:
//获取焦点时 --滚动到底部 interval = setInterval(function() { document.body.scrollTop = document.body.scrollHeight }, 100); //失去焦点取消 clearInterval(interval);
综上两种方法,第一种比较通用,第二种在软键盘弹出后,虽然没遮挡输入框,但当滚动页面时,会发现输入框跟随着滚动,因此,极力推荐第一种,简单实用。
最后想说一点,为什么ios会不识别fixed呢?因为手机屏本来能展示的内容就不多,所以不希望手机端有相对屏幕固定的元素,像某些网站的卖壮阳药广告一样死死贴在屏幕上,妨碍阅读。
参考链接:https://www.jianshu.com/p/782e61068334?tdsourcetag=s_pctim_aiomsg