我是靠谱客的博主 默默小白菜,这篇文章主要介绍解决Flex定位在IOS弹出键盘失效的方案,现在分享给大家,希望可以做个参考。

有好长一段时间没有写移动端Web页面了,今天下午在优化公司一个原有的一个移动web商城时发现商城在IOS系统中出现顶部搜索条和底部菜单栏在页面滚动式偶尔出现错位的问题,查看源码发现是由于顶部搜索条和底部菜单栏使用的是Flex定位导致的。在此稍稍整理下思路,把这个小方法分享给大家,希望可以帮到一些刚入坑的友友。

解决思路

解决方法其实挺简单,就是更改页面布局,使用 absolute绝对定位取代flex定位。

代码演示

复制代码
1
2
3
4
5
6
7
8
9
10
<html> <body> <div class="wrap"> //包裹层 <header></header> //顶部搜索条 <div class="con"></div> //需要滚动的页面 <footer></footer> //底部菜单栏 </div> </body> </html>
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.wrap{ position: relative; ... } header{ position: absolute; top: 0; ... } .con{ overflow-y: auto; //设置是否使用滚动条为auto webkit-overflow-scrolling: touch; //理论上可以调用原生页面滚动,提高滚动流畅度 ... } footer{ position: absolute; //绝对定位 bottom: 0; }

这样就可以很轻松的解决Flex失效的问题。

查看更多文章请点击进入我的个人博客

最后

以上就是默默小白菜最近收集整理的关于解决Flex定位在IOS弹出键盘失效的方案的全部内容,更多相关解决Flex定位在IOS弹出键盘失效内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(82)

评论列表共有 0 条评论

立即
投稿
返回
顶部