CSS3 动画在 iOS 上为什么会因为页面滚动也停止

html-css023

CSS3 动画在 iOS 上为什么会因为页面滚动也停止,第1张

不光是css3,gif动画也是,不信你打开一个gif 滚动的时候看它还动不动。

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

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

解决办法有两个,各有瑕疵:

不要使用 scroll 事件(此事件会被暂停),而是采用 touchmove(此事件会在用户触屏滚动的时候不断触发)。瑕疵是,在结束触屏后惯性滚动的时间里,touchmove 无法被触发了(scroll 当然也不行);

基于上一种方法,在所有的 touchmove 事件中,强行 preventDefault 阻止掉事件,然后根据 event.pageY 来手工设置所滑动元素的 scrollTop 值。当然,这样一来就没有了惯性滚动。

你也可以在 touchend 之后,手工模拟惯性滚动,计算速度以及速度衰减,可以参考各种各样的滚动插件。

要实现的功能是购物车图标在手机浏览器中,手指上滑渐渐显示,下滑渐渐消失,手指快速上下滑动,图标也能相应有闪现;

但是在苹果新系统中手指快速上下滑动,当开始惯性滚动时候无法监听到touch的相关事件,图标会一直显示或隐藏,这是不符合要求的。

最一开始考虑修改

属性控制元素在ios移动设备上是否使用滚动回弹效果

auto 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。

touch 使用具有回弹效果的滚动当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

-webkit-overflow-scrolling:

touch当手指从触摸屏上移开,会保持一段时间的滚动

-webkit-overflow-scrolling: auto

当手指从触摸屏上移开,滚动会立即停止

但是关闭滚动惯性后,视觉上拖动的太慢了,不满足预期

继续想办法

观察发现,手指快速上下滑动监听不到touch相关事件的时候,滚动条是在一直滑动的,是可以监听到scroll事件的

如果把页面的scroll改为,由触摸事件(Touch)计算偏移量 和 CSS3动画(Transform,Transition)移动偏移量来实现,取消scroll,就不会出现惯性滚动了

这里我用了mui框架scroll(区域滚动)来实现,它不是用scroll来实现滚动的,而是监听滑动偏移量,然后使用Transform,Transition来实现滚动效果,正好是我需要的。

使用mui参考

http://dev.dcloud.net.cn/mui/ui/#scroll

注意:区域滚动组件默认为absolute定位,全屏显示;在实际使用过程中,需要手动设置mui-scroll-wrapper滚动区域的位置(top和height)

demo: https://github.com/MiuMiu-S/Work-Notes-180310