ios监听滚动问题

最近项目首页改版增加一个动效,简单地说就是当滚动条滚动到一定位置,出现两个div。
安卓一切都正常,和预想的一样通过 window.addEventListener(‘scroll’, () => {});效果还算不错。但是到了ios发现,有很严重的延时,不流畅。一开始以为是有延时,后来发现并不是延时。
1,ios 监听滚动,为了减小开销,滚动结束才会触发事件,滚动过程中不会实时监听触发。
2,网上有说 用监听touchmove 替代 监听scroll,但是调试的时候发现touchmove的触发频率很低,视觉效果上还是会有一个延时。
3,后来找了些资料说是 用div内部的滚动(overflow:scroll)代替页面整体的滚动。这种方法的确可以在ios上解决上面的问题,但又引发了一个新的问题,就是ios的页面滑动会变的非常卡,没有惯性。然后又在网上找资料,找到了这个属性-webkit-overflow-scrolling。这个属性控制元素在移动设备上是否使用滚动回弹效果.当值设为touch,会有回弹效果,设为auto,手指离开滚动立刻结束。于是我在页面里设置了这个属性,果然有了效果。。。。。但是又引发了问题,一些fixed不起作用了等。
4,后来想到禁用滚动条,采用touch+transform来模拟滚动。最后是采用的better-scroll插件解决的这个问题,完美解决,下篇文章讲一下自己运用better-scroll遇到的一些问题。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值