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

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

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

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

tip:这个属性比较消耗性能,如果对于性能有要求的页面,不是特别长的页面可以用其他方法实现

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

    原文作者:风吹一个大耳东
    原文地址: https://segmentfault.com/a/1190000016798134
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞