资讯专栏INFORMATION COLUMN

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

Michael_Lin / 2502人阅读

摘要:原有的结构也还在就是不显示。调试过程最开始把问题定位在空白区域样式问题,包括把全部重置,强行展示都没有效果。结论使用这种滑动过程中出现白屏的情况,暂时测试出现在小范围滚动的长页面,如果是特别长的数据列表测试是没有出现这个问题。

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

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

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

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114070.html

相关文章

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

    摘要:原有的结构也还在就是不显示。调试过程最开始把问题定位在空白区域样式问题,包括把全部重置,强行展示都没有效果。结论使用这种滑动过程中出现白屏的情况,暂时测试出现在小范围滚动的长页面,如果是特别长的数据列表测试是没有出现这个问题。 问题描述:一个内嵌IOSAPP的H5页面,长页面,大概1.6个屏幕高度,由于有列表滑动起来很不流畅,所以用了-webit-overflow-scrolling:...

    CoorChice 评论0 收藏0
  • APP内嵌H5后退按钮问题

    摘要:最近都在用做内嵌页面,在点击后退时如果在路由中跳转过多次点后退会后退很多次才能退出页面用户体验很差。同时,这些方法会和事件一起工作。 最近都在用vue做APP内嵌H5页面,在APP点击后退时如果在路由中跳转过多次 点后退会后退很多次才能退出页面 用户体验很差。 下面来说下解决方法 因为hisotry模式官方说需要服务器配置所以路由一直在用hash模式,针对这一需求需要了解h5新加的...

    phoenixsky 评论0 收藏0
  • 「前端早读君009」快速小程序开发之微信小程序内嵌 H5

    摘要:前言微信小程序中可以直接运行页面,这一新组件的产生,可能直接导致小程序数量迎来一波高峰。微信小程序配置系列问题配置域名业务域名中配置的就是小程序以及和中引用的域名。 今日励志语 要接受自己行动所带来的责任而非自己成就所带来的荣耀。 前言 微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰。本篇博文将从业务选型,微信小程序后台...

    wh469012917 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<