请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
显示全部楼层
12
帖子
0
勋章
427
Y币

[App引擎] IOS 滚动条阻塞

[复制链接]
发表于 2016-4-8 20:24:44
IOS 滚动条会被滚动阻塞全部消息,求解决方案 啊

CSS3 动画也会被卡死 ,整个线程全部阻塞了
14
帖子
0
勋章
227
Y币
这事儿吧其实和前端没啥关系,倒是和iOS的事件处理机制有关。

iOS最先响应屏幕反应。响应顺序依次为Touch——Media——Service——Core架构,当用户只要触摸接触了屏幕之后,系统就会最优先去处理屏幕显示也就是Touch这个层级,然后才是媒体(Media),服务(Service)以及Core架构。

所以说,当系统接收到Touch事件之后会优先响应,此时会暂停屏幕上包括js、css的渲染。这个时候不光是css动画不动了,哪怕页面没有加载完如果你手指头还停留在屏幕上那么页面也不会继续加载,直到你的手松开。

相反Android响应屏幕排在应用与框架之后。Android的优先级响应级别则是Application——Framework——Library——Kernal架构,和显示相关的图形图像处理这一部分属于Library,当你对屏幕操作之后,Android系统首先会激活应用、框架,然后才是屏幕最后是核心架构。

因此Android上面没有这个问题,但这样也带来了卡顿。



解决办法有两个,各有瑕疵:
  • 不要使用 scroll 事件(此事件会被暂停),而是采用 touchmove(此事件会在用户触屏滚动的时候不断触发)。瑕疵是,在结束触屏后惯性滚动的时间里,touchmove 无法被触发了(scroll 当然也不行);
  • 基于上一种方法,在所有的 touchmove 事件中,强行 preventDefault 阻止掉事件,然后根据 event.pageY 来手工设置所滑动元素的 scrollTop 值。当然,这样一来就没有了惯性滚动。
    你也可以在 touchend 之后,手工模拟惯性滚动,计算速度以及速度衰减,可以参考各种各样的滚动插件。


12
帖子
0
勋章
427
Y币
郑晓 发表于 2016-4-8 20:56
这事儿吧其实和前端没啥关系,倒是和iOS的事件处理机制有关。

iOS最先响应屏幕反应。响应顺序依次为Touch ...

试过了 没到原生那个预期效果差异蛮大的。真的太影响APP 体验了
4
帖子
0
勋章
39
Y币
关注一下
您需要登录后才可以回帖 登录

本版积分规则