码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-08-19 14:06:30      阅读:907      评论:0      收藏:0      [点我收藏+]

标签:lan   导致   相对   恢复   inline   play   href   16px   介绍   

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

 

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

标签:lan   导致   相对   恢复   inline   play   href   16px   介绍   

原文地址:https://www.cnblogs.com/chenwenhao/p/9500969.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!