针对于iosAPP内嵌H5,-webit-overflow-scrolling:touch;产生空白状况

问题描述:一个内嵌IOSAPP的H5页面,长页面,大概1.6个屏幕高度,因为有列表滑动起来很不流畅,因此用了-webit-overflow-scrolling:touch;这个只针对ios端的物理滚动属性来调整,可是滚动流畅实现了,部分区域由于加了这个属性出现滑动白屏状况。原有的html结构也还在就是不显示。html

调试过程:最开始把问题定位在空白区域样式问题,包括把overflow所有重置,JS强行展现都没有效果。最后发现引发滚动的长页面有一个盒子没有定义高度,这个高度是由里面的内容撑开的,因此尝试给这个列表盒子定了一个高度,果真在滑动的过程当中再也不出现空白区域,最后为了适配使用弹性布局,让列表盒子撑满剩下的屏幕,而且内部盒子定义高度。ios

结论:使用-webit-overflow-scrolling:touch;这种滑动过程当中出现白屏的状况,暂时测试出如今小范围滚动的长页面,若是是特别长的数据列表测试是没有出现这个问题。web

tip:这个属性比较消耗性能,若是对于性能有要求的页面,不是特别长的页面能够用其余方法实现布局

完善: 要想正常使用兼容-webkit-overflow-scrolling:touch这个属性,顶部条底部条最好不要写固定定位,要否则你将出现时有时无。性能

相关文章
相关标签/搜索