码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2020-05-31 12:40:18      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:开始   页面   适配   html   高度   白屏   data-   定位   部分   

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

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

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

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

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

标签:开始   页面   适配   html   高度   白屏   data-   定位   部分   

原文地址:https://www.cnblogs.com/10manongit/p/12996924.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!