解决Flex定位在IOS弹出键盘失效的方案

63 阅读 0 评论 42 点赞

我是靠谱客的博主默默小白菜，最近开发中收集的这篇文章主要介绍解决Flex定位在IOS弹出键盘失效的方案，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

解决思路

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

代码演示

<html>
<body>
 <div class="wrap"> //包裹层
 <header></header> //顶部搜索条
 <div class="con"></div> //需要滚动的页面
 <footer></footer> //底部菜单栏
</div>
</body>
</html>

.wrap{
    position: relative;
    ...
}
header{
    position: absolute; 
    top: 0;
    ...
}
.con{
    overflow-y: auto; //设置是否使用滚动条为auto
    webkit-overflow-scrolling: touch; //理论上可以调用原生页面滚动，提高滚动流畅度
    ...
}
footer{
    position: absolute; //绝对定位
    bottom： 0；
}