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

 

版权声明:本文为chenwenhao原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/chenwenhao/p/9500969.html