规避H5开发ios使用fixed造成的闪屏

原创声明

本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
CSDN ID：tom_wong666

问题：

H5开发ios，给页面头部使用fixed出现闪屏现象；

分析：

使用fixed给头部定位，页面滚动时，ios中出现屏幕中被固定的头部页面在滚动过程中闪屏，在安卓中未发现此问题。可见fixed在iso中并不稳定。

解决：

头部用普通文档流替代fixed定位，滚动区域改为div内部滚动，如下图：

代码实现：

时间仓促，不做具体demo，只将核心代码写一下：

/*头部*/
header: {
  height: 1rem;
}
/*滚动内容区*/
main: {
  /*高度界定*/
  height: calc(100%-1rem);
  /*横向移除隐藏*/
  overflow-x: hidden;
  /*纵向移除隐藏，导航条在需要时显示*/
  overflow-y: auto;
  /*模拟IOS原生滚动回弹效果，提升滚动体验 */
  -webkit-overflow-scrolling: touch;
}

提醒：

代码实现基于vue框架，其中：“height: calc(100%-1rem);”用到了less和rem的设置，不清楚设置步骤的，可以看我下面的博文：
新建一个vue空白项目并上传到github上 跳转到此文
Less在Vue中的配置 跳转到此文
rem设置 跳转到此文