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

2019-12-08 01:20:58

这个也是金狮贵宾会登录网址一直以来都很在意的小毛病，搜集整理了一些资料，并做了测试，结论是：iOS（7以及之前版本）浏览器在页面「惯性滚动」期间，暂停了CSS3animation/JS大多数事件，在「触摸滚动」期间，暂停了CSS3animation/JSscroll事件。不过在iOS8里，终于解决了这个问题[1]。测试方法是使用setInterval进行计数，可以发现滚动时确实暂停了事件队列。有些网页在滚动的时候，加载中的图片不渲染，停止滚动的瞬间即加载出来，也是这个原因。造成此问题的原因是基于效率的考虑，苹果当然是不允许自己引以为傲的惯性滚动出现卡顿和闪烁的。解决办法有两个，各有瑕疵：不要使用scroll事件（此事件会被暂停），而是采用touchmove（此事件会在用户触屏滚动的时候不断触发）。瑕疵是，在结束触屏后惯性滚动的时间里，touchmove无法被触发了（scroll当然也不行）；基于上一种方法，在所有的touchmove事件中，强行preventDefault阻止掉事件，然后根据event.pageY来手工设置所滑动元素的scrollTop值。当然，这样一来就没有了惯性滚动。你也可以在touchend之后，手工模拟惯性滚动，计算速度以及速度衰减，可以参考各种各样的滚动插件。----附：[1]WhytheScrollEventChangeiniOS8isaBigDeal-TelerikDeveloperNetwork也可以看看金狮贵宾会登录网址之前写的小工具，就为了解决此问题大费周折：https://quietshu.github.io/list-label/demo.html

上一条：上一篇：19岁女孩分裂六重人格被喷戏精为何心理疾病很难被旁人认可接受
下一条：下一篇：python变量的类型标记是否是好习惯如果不是怎么避免

相关产品

相关资讯