framework7在iOS下滚动冻结的问题

问题

最近入职一家公司接手了一个项目,使用了vue+framework7,这个项目使用framework7的初衷只是把它当作UI框架,但是在ios的safari浏览器或者是微信内置的浏览器打开时会出现滚动冻结的问题。
具体操作: 页面处于顶端时用力往下拉,或者页面处于底部时用力往下拉,在ios下顶部或者底部会出现空白区域,手松开后页面会恢复到原位,但是有时候经过上面的操作后,页面无法用手指滑动了。

解决办法

先上解决的代码,但是这个并不是很完美,但是也找不到更好的办法了
在你的项目中使用的全局样式文件中添加:

.page-content::before { display: block; content: ""; position: absolute; z-index: -99999; top: 0px; left: 0px; bottom: -1px; right: 0px; }

原因

图片描述

凶手就是这个属性

-webkit-overflow-scrolling: touch;

这个属性只有在iOS下才生效,当容器中的内容的height大于容器的height的时候使用overflow: scroll,就会产生滚动,而-webkit-overflow-scrolling: touch就会使滚动变得平滑、带有惯性。在Android中的属性是overflow: scroll或者overflow: auto后是不需要这个属性的,本身的滚动就会产生平滑和带有惯性的效果。

至于为什么这个属性导致了iOS滚动冻结的原因,emmmm...水平太低不知道怎么研究。
百度了好久看到一篇文章
深入研究-webkit-overflow-scrolling:touch及ios滚动
这篇文章讲述了基本的原因,不过最后的解决方案我试过好像还是有点问题,用手在屏幕上快速滑动的时候还是会冻结

最后到github上framework7的issue中找有人遇到相同的问题了,我提出了我的情况,有个人回复了,上面的解决的代码就是它提供的,这个是链接Problem with scrolling in App in Home Screen Added.

解决思路跟上面一篇国内的文章是一样的,但是我感觉这个更好
国外还有另外一款框架叫onsen跟framework7有相同的问题,因为他们为了使iOS的滚动能够平滑都使用了-webkit-overflow-scrolling: touch;

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值