|
这事儿吧其实和前端没啥关系,倒是和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 之后,手工模拟惯性滚动,计算速度以及速度衰减,可以参考各种各样的滚动插件。
|
|